Universal Integrations

📌 Squarespace Setup

1. Log into your Squarespace site editor — go to squarespace.com, click "Sites", select your site, click "Edit Site"
2. Find where you want the sign-in button — navigate to the page where customers sign in (e.g., "Services" or "Contact")
3. Add a Code Block:
   • Click "+" to add a new block
   • Search for "Code"
   • Click to add the Code Block to your page
4. Find your Organization ID — This is a unique code that identifies your business. It should have been provided to you when you set up PetSitterPro. It looks something like peeps-n-petz or my-pet-sitting-business. Have it ready before the next step.
5. Copy ALL of the following code — Starting with the very first <div and ending with the very last </div>. You will copy everything in the grey box below. Do not leave out any part of it:

   <div style="text-align: center; margin: 20px 0;">
     <button onclick="document.getElementById('psp-modal').style.display='block'" 
             style="padding: 12px 24px; background: #0080F0; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;">
       Sign In to Book
     </button>
   </div>
   
   <div id="psp-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; justify-content: center; align-items: center;">
     <div style="background: white; padding: 20px; border-radius: 8px; position: relative; width: 90%; max-width: 600px; height: 80%; overflow: auto;">
       <button onclick="document.getElementById('psp-modal').style.display='none'" 
               style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 24px; cursor: pointer;">×</button>
       <iframe src="https://petsitterpro-c4644.web.app/?org_id=YOUR_ORG_ID&from=squarespace" 
               style="width: 100%; height: 100%; border: none; margin-top: 20px;">
       </iframe>
     </div>
   </div>

   ⚠️ IMPORTANT: After you paste the code, you MUST replace the words YOUR_ORG_ID with your actual Organization ID. For example, if your Organization ID is peeps-n-petz, change this line:

   src="https://petsitterpro-c4644.web.app/?org_id=YOUR_ORG_ID&from=squarespace"

   to this:

   src="https://petsitterpro-c4644.web.app/?org_id=peeps-n-petz&from=squarespace"

6. Save and publish — click "Save" and then "Publish" to make your changes live
7. Test it — Click the "Sign In to Book" button; the portal should appear in a popup window on your page

📌 WordPress Setup (Gutenberg Editor)

This guide works for WordPress.com and self-hosted WordPress with Gutenberg editor. No plugins or coding required.

Step 1: Add the Embed Code

1. Edit the page where you want the booking button to appear.
2. Click the "+" icon to add a new block.
3. Search for "Custom HTML" in the block search box (or scroll down to find it).
4. Click to add the Custom HTML block.

Step 2: Paste the Embed Code

Copy this code and paste it into the Custom HTML block:

<button onclick="window.open('https://petsitterpro-c4644.web.app?org_id=YOUR_ORG_ID', '_blank')" style="padding: 12px 24px; background-color: #0080F0; color: white; border: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.3s;">
  Book a Pet Sitter
</button>

Step 3: Customize (Optional)

• Button Text: Change "Book a Pet Sitter" to any text you prefer.
• Button Color: Change #0080F0 to your brand color (e.g., #0080F0).
• Button Size: Adjust padding: 12px 24px to make the button larger or smaller.

Step 4: Publish

1. Click "Publish" or "Update" at the top of the page.
2. Visit your page and click the button to verify it opens the booking portal in a new tab.

📌 Shopify Setup (Custom Liquid Section)

This guide uses Shopify's Custom Liquid section. No coding knowledge required—just copy and paste.

Step 1: Access Your Theme Editor

1. Log in to your Shopify Admin.
2. Click Online Store in the left sidebar, then click Themes.
3. Find your active theme and click Customize (or the pencil icon).

Step 2: Add a Custom Liquid Section

1. In the theme editor, click the page or section where you want the button (e.g., homepage).
2. Click Add section on the left panel.
3. Scroll down and find Custom Liquid (or search for it).
4. Click to add the Custom Liquid section.

Step 3: Paste the Embed Code

Copy this code and paste it into the Custom Liquid block:

<button onclick="window.open('https://petsitterpro-c4644.web.app?org_id=YOUR_ORG_ID', '_blank')" style="padding: 12px 24px; background-color: #0080F0; color: white; border: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.3s;">
  Book a Pet Sitter
</button>

Step 4: Customize (Optional)

• Button Text: Change "Book a Pet Sitter" to any text you prefer (e.g., "Schedule Sitter").
• Button Color: Change #0080F0 to your brand color (e.g., #FF6B35).
• Button Size: Adjust padding: 12px 24px to make it larger (e.g., padding: 16px 32px) or smaller.

Step 5: Save and Test

1. Click Save at the top right of the theme editor.
2. Visit your Shopify store (preview or live) and click the button to verify it opens the booking portal in a new tab.
3. If you want the button on multiple pages (product pages, about page, etc.), repeat steps 2-5 for each page.

📌 GoDaddy Website Builder Setup

This guide uses GoDaddy's HTML section. No coding knowledge required—just copy and paste.

Step 1: Access Your Website Editor

1. Log in to your GoDaddy account.
2. Go to My Products (top right corner).
3. Find your Websites + Marketing product and click Manage.
4. Click Edit Website (or the pencil icon).

Step 2: Navigate to Your Page

1. Select the page where you want to add the booking button (e.g., Homepage, About, Services).
2. Click the page to open it for editing.

Step 3: Add an HTML Section

1. Click the + Add button (usually on the left sidebar or bottom of the page).
2. Search for "HTML" or "Code" in the section search box.
3. Click HTML (or Code) to add the section.

Step 4: Paste the Embed Code

Copy this code and paste it into the HTML code box:

<button onclick="window.open('https://petsitterpro-c4644.web.app?org_id=YOUR_ORG_ID', '_blank')" style="padding: 12px 24px; background-color: #0080F0; color: white; border: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.3s;">
  Book a Pet Sitter
</button>

Step 5: Customize (Optional)

• Button Text: Change "Book a Pet Sitter" to any text you prefer (e.g., "Schedule Now").
• Button Color: Change #0080F0 to your brand color (e.g., #FF6B35).
• Button Size: Adjust padding: 12px 24px to make it larger (e.g., padding: 16px 32px) or smaller.

Step 6: Publish

1. Click Publish or Save at the top of the editor.
2. Visit your website and click the button to verify it opens the booking portal in a new tab.
3. You can add the button to multiple pages by repeating steps 2-5 for each page.

📌 Weebly Setup (Embed Code Element)

This guide uses Weebly's Embed Code element. No coding knowledge required—just copy and paste.

Step 1: Access Your Weebly Editor

1. Go to weebly.com and log in to your account.
2. Click on your website to open it.
3. Click the pencil icon or Edit Site to enter the editor.

Step 2: Navigate to Your Page

1. On the left sidebar, find the page where you want to add the button (e.g., Homepage, Services, Contact).
2. Click the page to open it for editing.

Step 3: Add an Embed Code Element

1. In the editor, look for the Build panel on the left (or click + Add Element).
2. Scroll down and find Embed Code (it may be under "Advanced" or "Apps").
3. Drag the Embed Code element onto your page where you want the button.

Step 4: Paste the Embed Code

Click the Embed Code element and paste this code:

<button onclick="window.open('https://petsitterpro-c4644.web.app?org_id=YOUR_ORG_ID', '_blank')" style="padding: 12px 24px; background-color: #0080F0; color: white; border: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.3s;">
  Book a Pet Sitter
</button>

Step 5: Customize (Optional)

• Button Text: Change "Book a Pet Sitter" to any text you prefer (e.g., "Schedule a Sitter").
• Button Color: Change #0080F0 to your brand color (e.g., #FF6B35).
• Button Size: Adjust padding: 12px 24px to make it larger (e.g., padding: 16px 32px) or smaller.

Step 6: Publish

1. Click Save or Publish at the top of the editor.
2. Visit your Weebly site and click the button to verify it opens the booking portal in a new tab.
3. You can add the button to multiple pages by repeating steps 2-4 for each page.

📌 Custom HTML Setup

For any website with direct HTML access, paste this into your page:

<!DOCTYPE html>
<html>
<head>
  <script>
    window.PetSitterProEmbed = {
      org_id: "YOUR_ORG_ID",
      companyName: "Your Company",
      primaryColor: "#0080F0"
    };
  </script>
  <script src="https://us-east1-petsitterpro-c4644.cloudfunctions.net/serveEmbedJs"></script>
</head>
<body>
  <button onclick="window.PetSitterProPortal.openModal()" style="padding: 12px 24px; background: #0080F0; color: white; border: none; border-radius: 6px; cursor: pointer;">
    Sign In
  </button>
</body>
</html>