Wix / Squarespace Integration

Wix and Squarespace are known for their user-friendly visual editors that make website building accessible to everyone. Both platforms support embedding gettickr.app timers, though each has its own approach. This guide covers both platforms in detail.

Platform Comparison

Wix Integration

Wix uses a drag-and-drop editor that makes website building intuitive and visual.

Step-by-Step Guide for Wix

Step 1: Create Your Timer

1. Go to the Editor
2. Design and configure your timer
3. Match colors and fonts to your Wix site
4. Copy the timer URL from the Renderer section

Step 2: Open Wix Editor

1. Log in to your Wix account
2. Go to My Sites
3. Click "Edit Site" on the site where you want to add the timer
4. Navigate to the page where the timer should appear

Step 3: Add HTML iFrame Element

1. Click the "+" (Add Elements) button on the left sidebar
2. Scroll down or search for "Embed" section
3. Click "Embed"
4. Select "HTML iframe" from the options
5. Wix places a placeholder element on your page

Step 4: Configure the iFrame

1. Click the iFrame element to select it
2. Click "Enter Code" or the Settings icon
3. In the "Code" section, select "Code" tab (not URL)
4. Paste your iFrame code:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none;"
  title="Countdown Timer"
>
</iframe>

5. Click "Update"

Step 5: Position and Resize

1. Drag the element to your desired position
2. Resize by dragging the corner handles
3. Use Wix's alignment guides (blue lines) to align with other elements
4. Hold Shift while dragging to maintain proportions

Step 6: Mobile Optimization

1. Click the mobile icon in the top toolbar
2. Switch to Mobile Editor
3. Reposition and resize the timer for mobile screens
4. Mobile and desktop layouts are independent in Wix

Step 7: Publish

1. Click "Preview" to see how it looks before publishing
2. Test on both desktop and mobile views
3. Click "Publish" when satisfied
4. Your timer is now live!

Wix Element Settings

Wix Positioning Tips

Absolute Positioning Pros:

• Pixel-perfect control
• Overlay on images/sections
• Creative layouts
• Professional designs

Absolute Positioning Considerations:

• Test mobile carefully
• Can overlap on small screens
• Requires manual mobile adjustment

Wix Code Snippet Example

Full-Width Hero Timer:

<div
  style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px;"
>
  <h2 style="text-align: center; font-size: 36px; margin-bottom: 20px;">
    Limited Time Offer!
  </h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; display: block;"
    title="Sale Timer"
  >
  </iframe>
</div>

Compact Sidebar Timer:

<div
  style="background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center;"
>
  <h3 style="margin-top: 0; font-size: 20px;">Event Countdown</h3>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="250"
    frameborder="0"
    style="border: none;"
    title="Event Timer"
  >
  </iframe>
  <p style="margin-bottom: 0; font-size: 14px;">Don't miss out!</p>
</div>

Squarespace Integration

Squarespace uses a block-based editing system with a clean, modern approach.

Step-by-Step Guide for Squarespace

Step 1: Create Your Timer

1. Go to the Editor
2. Design a timer that matches your Squarespace site aesthetic
3. Squarespace sites often have minimalist designs - consider simple timer styles
4. Copy the timer URL

Step 2: Open Squarespace Editor

1. Log in to your Squarespace account
2. Go to Pages in the left menu
3. Navigate to the page where you want the timer
4. Click "Edit" to open the page editor

Step 3: Add Code Block

1. Hover over where you want the timer (between existing blocks)
2. Click the "+" (Insert Point) that appears
3. Search for or scroll to "Code"
4. Click "Code" to add a Code Block
5. A code editor appears with <h1>HELLO</h1> placeholder

Step 4: Enter Timer Code

1. Delete the placeholder code
2. Paste your iFrame code:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none; max-width: 100%;"
  title="Countdown Timer"
>
</iframe>

3. Click "Apply" in the bottom-right
4. The timer appears in your page flow

Step 5: Adjust Block Position

1. Drag the Code Block up or down to reorder
2. Use the block menu (hover → click six dots) for more options
3. Common positions:
   • Above page content - Maximum visibility
   • Below heading - Contextual placement
   • Before footer - Prominent but non-intrusive

Step 6: Customize Block Settings

1. Hover over the Code Block
2. Click "Edit" to modify code
3. Click "Duplicate" to copy for multiple timers
4. Click "Remove" to delete

Step 7: Save and Publish

1. Click "Save" in the top-left
2. Click "Preview" to test before publishing
3. Use device preview icons to test mobile/tablet views
4. Click "Publish" or "Update" when ready

Squarespace Block Types

Squarespace Code Examples

Hero Section Timer:

<section
  style="text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"
>
  <h1 style="font-size: 48px; margin: 0 0 10px 0;">Summer Sale</h1>
  <p style="font-size: 24px; margin: 0 0 30px 0;">Ends Soon!</p>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; max-width: 1000px;"
    title="Sale Timer"
  >
  </iframe>
</section>

Inline Content Timer:

<div style="margin: 40px auto; max-width: 800px;">
  <h3 style="text-align: center; margin-bottom: 20px;">Event Starts In:</h3>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="300"
    frameborder="0"
    style="border: none; display: block;"
    title="Event Timer"
  >
  </iframe>
</div>

Product Launch Timer:

<div
  style="background: #f5f5f5; padding: 40px; border-radius: 8px; margin: 20px 0;"
>
  <h2 style="text-align: center; margin-top: 0; color: #333;">
    🚀 New Product Launch
  </h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="350"
    frameborder="0"
    style="border: none;"
    title="Launch Timer"
  >
  </iframe>
  <p style="text-align: center; margin-bottom: 0;">
    <a
      href="/shop"
      style="display: inline-block; padding: 12px 30px; background: #000; color: #fff; text-decoration: none; border-radius: 4px; margin-top: 20px;"
    >
      Get Notified
    </a>
  </p>
</div>

Advanced Styling (Both Platforms)

Custom CSS for Wix

Location: Site Settings → Custom Code → Add Custom Code (in <head>)

<style>
  /* Style all iFrames on site */
  iframe {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  /* Mobile-specific styling */
  @media (max-width: 768px) {
    iframe {
      height: 300px !important;
    }
  }
</style>

Custom CSS for Squarespace

Location: Design → Custom CSS

/* Style Code Block iFrames */
.sqs-block-code iframe {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.sqs-block-code iframe:hover {
  transform: scale(1.02);
}

/* Mobile optimization */
@media screen and (max-width: 767px) {
  .sqs-block-code iframe {
    height: 250px !important;
  }
}

Troubleshooting

Wix Troubleshooting

Squarespace Troubleshooting

Performance Considerations

Both platforms optimize performance automatically, but consider:

Template-Specific Considerations

Wix Templates

Squarespace Templates

Next Steps

• iFrame Integration - Detailed iFrame customization guide
• Customize Timer Design - Match your site's aesthetic
• WordPress Integration - If you also use WordPress
• Shopify Integration - For e-commerce stores