iFrame Integration

Information

iFrames are the universal method for embedding gettickr.app timers on any website. This guide shows you everything you need to know to implement timers using iFrame code.

iFrames are the fundamental technology behind embedding gettickr.app timers on websites. Understanding how to work with iFrames gives you the flexibility to integrate timers into any website platform or custom-coded page.

What is an iFrame?

An iFrame (inline frame) is an HTML element that embeds another HTML page within your current page. When you use an iFrame to embed a timer, you're creating a window on your webpage that displays your timer from gettickr.app.

Aspect	Description
Technology	Standard HTML element (`<iframe>`)
Browser Support	All modern browsers (Chrome, Firefox, Safari, Edge)
Compatibility	Works on all website platforms
Complexity	Simple - just paste HTML code
Flexibility	Full control over size, position, and styling

Tip

iFrames are the same technology used to embed YouTube videos, Google Maps, and other external content on websites. If your platform supports those, it supports gettickr.app timers!

Basic iFrame Code Structure

The basic iFrame code for embedding a timer follows a simple HTML structure:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  allowfullscreen
>
</iframe>

iFrame Attributes Explained

Attribute	Purpose	Example Value	Required
`src`	Timer URL to display	`https://gettickr.app/r/#abc123`	✅ Yes
`width`	iFrame width	`800` (pixels) or `100%` (responsive)	✅ Yes
`height`	iFrame height	`400` (pixels)	✅ Yes
`frameborder`	Border around iFrame	`0` (no border)	⬜ Optional
`allowfullscreen`	Enable fullscreen capability	No value needed	⬜ Optional
`loading`	When to load iFrame	`lazy` (load when visible)	⬜ Optional
`title`	Accessibility description	`"Countdown Timer"`	⬜ Recommended

Tip

Always include a title attribute for accessibility - it helps screen readers describe the content to visually impaired users.

Creating Your iFrame Code

Follow these steps to create iFrame code for your timer:

Step 1: Get Your Timer URL

Create and customize your timer in the Editor
In the Renderer section, find your timer's display URL
Copy the complete URL (looks like https://gettickr.app/r/#YOUR-TIMER-ID)

Step 2: Choose Your Dimensions

Decide on the width and height based on your timer's design and where it will appear:

Timer Placement	Recommended Width	Recommended Height	Aspect Ratio
Full-width	`100%`	`400-600px`	~16:9 or 16:6
Hero Section	`1200px` or `100%`	`600px`	2:1
Sidebar	`300-400px`	`200-300px`	~4:3
Content Width	`800px`	`400px`	2:1
Small Widget	`400px`	`200px`	2:1

Information

Match the iFrame dimensions to the design dimensions you set when creating your timer in the editor for the best appearance.

Step 3: Build Your Code

Replace YOUR-TIMER-ID with your actual timer ID from the URL:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  title="Countdown Timer"
  allowfullscreen
>
</iframe>

Step 4: Add to Your Website

Copy the complete iFrame code and paste it into your website:

HTML/Code Editor: Paste directly into your HTML
Website Builder: Use "Custom HTML" or "Embed Code" block
CMS: Add to HTML block, custom HTML widget, or text editor (HTML mode)

Warning

Make sure to paste the code in HTML mode, not visual/rich text mode. If you paste in visual mode, the code will appear as text instead of rendering the timer.

Security Considerations

Modern browsers implement security features for iFrames to protect users:

Security Feature	What It Does	gettickr.app Compatibility
HTTPS Requirement	Many sites only allow HTTPS iFrames	✅ gettickr.app uses HTTPS
X-Frame-Options	Controls who can embed the content	✅ Allows embedding
CSP Headers	Content Security Policy restrictions	✅ Whitelisted
Sandbox Attribute	Restricts iFrame capabilities	⬜ Not needed for timers

Information

Gettickr.app timers are designed to work safely in iFrames without requiring special security configurations. Default browser security settings work perfectly fine.

Optional Sandbox Attribute

If your website security policy requires it, you can add sandbox restrictions:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  style="border: none;"
>
</iframe>

Warning

Only add sandbox attribute if specifically required by your security policy. It can restrict timer functionality if not configured correctly.

Performance Optimization

Lazy Loading

Defer loading iFrames until they're near the viewport:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  loading="lazy"
  style="border: none;"
>
</iframe>

Benefits:

Faster initial page load
Reduced bandwidth for users who don't scroll to timer
Better performance on mobile devices

Tip

Use loading="lazy" for timers that appear below the fold (not immediately visible when page loads).

Performance Best Practices

Practice	Why	How
Single Timer Per Page	Minimize resource usage	Use one timer, not multiples
Appropriate Size	Don't load huge iFrames unnecessarily	Match design dimensions
Lazy Loading	Load only when needed	Add `loading="lazy"`
Avoid Nested iFrames	Complexity hurts performance	One level only

Troubleshooting

Timer Not Appearing

Problem	Solution
Blank space where timer should be	Verify timer URL is correct
No iFrame visible at all	Check HTML mode (not visual editor)
Error message in iFrame	Timer may have been deleted or URL is incorrect
Black screen	iFrame dimensions may be incorrect

Tip

Open the timer URL directly in a browser to verify it works before troubleshooting the iFrame embedding.

Sizing Issues

Problem	Solution
Timer appears too small	Increase width and height values
Timer appears cut off	Check iFrame dimensions match timer design
Timer overflows container	Add `max-width: 100%` to iFrame
Unwanted scrollbars	Set `scrolling="no"` or `overflow: hidden`
Wrong aspect ratio on mobile	Implement responsive aspect ratio container

Platform-Specific Issues

Platform	Common Issue	Solution
WordPress	Visual editor strips code	Use Code Editor or HTML block
Wix	iFrame not allowed in text	Use HTML iFrame element from Add menu
Squarespace	Limited iFrame support	Use Code Block, not Text Block
Shopify	iFrame in liquid templates	Use proper Liquid syntax for HTML
Webflow	Embed element needed	Use Embed element, not HTML Embed

Warning

Some website platforms filter or restrict iFrame code for security. If your iFrame doesn't work, check your platform's documentation about embedding external content.

Browser Console Errors

Check browser developer console (F12) for error messages:

X-Frame-Options denied

Solution: Contact your website host - your site may be blocking iFrames.

Mixed Content: blocked loading insecure content

Solution: Ensure timer URL uses https:// not http://

CSP: frame-src violation

Solution: Update your Content Security Policy to allow gettickr.app

Next Steps

WordPress Integration - Platform-specific guide for WordPress
Shopify Integration - E-commerce timer setup
Custom HTML Integration - Advanced implementation techniques
Customize Timer Design - Make your timer match your website aesthetic

Tip

For platform-specific instructions beyond basic iFrame code, check out the dedicated integration guides for your website platform!

iFrame Integration

Information

iFrames are the universal method for embedding gettickr.app timers on any website. This guide shows you everything you need to know to implement timers using iFrame code.

What is an iFrame?

Aspect	Description
Technology	Standard HTML element (`<iframe>`)
Browser Support	All modern browsers (Chrome, Firefox, Safari, Edge)
Compatibility	Works on all website platforms
Complexity	Simple - just paste HTML code
Flexibility	Full control over size, position, and styling

Tip

iFrames are the same technology used to embed YouTube videos, Google Maps, and other external content on websites. If your platform supports those, it supports gettickr.app timers!

Basic iFrame Code Structure

The basic iFrame code for embedding a timer follows a simple HTML structure:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  allowfullscreen
>
</iframe>

iFrame Attributes Explained

Attribute	Purpose	Example Value	Required
`src`	Timer URL to display	`https://gettickr.app/r/#abc123`	✅ Yes
`width`	iFrame width	`800` (pixels) or `100%` (responsive)	✅ Yes
`height`	iFrame height	`400` (pixels)	✅ Yes
`frameborder`	Border around iFrame	`0` (no border)	⬜ Optional
`allowfullscreen`	Enable fullscreen capability	No value needed	⬜ Optional
`loading`	When to load iFrame	`lazy` (load when visible)	⬜ Optional
`title`	Accessibility description	`"Countdown Timer"`	⬜ Recommended

Tip

Always include a title attribute for accessibility - it helps screen readers describe the content to visually impaired users.

Creating Your iFrame Code

Follow these steps to create iFrame code for your timer:

Step 1: Get Your Timer URL

Create and customize your timer in the Editor
In the Renderer section, find your timer's display URL
Copy the complete URL (looks like https://gettickr.app/r/#YOUR-TIMER-ID)

Step 2: Choose Your Dimensions

Decide on the width and height based on your timer's design and where it will appear:

Timer Placement	Recommended Width	Recommended Height	Aspect Ratio
Full-width	`100%`	`400-600px`	~16:9 or 16:6
Hero Section	`1200px` or `100%`	`600px`	2:1
Sidebar	`300-400px`	`200-300px`	~4:3
Content Width	`800px`	`400px`	2:1
Small Widget	`400px`	`200px`	2:1

Information

Match the iFrame dimensions to the design dimensions you set when creating your timer in the editor for the best appearance.

Step 3: Build Your Code

Replace YOUR-TIMER-ID with your actual timer ID from the URL:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  title="Countdown Timer"
  allowfullscreen
>
</iframe>

Step 4: Add to Your Website

Copy the complete iFrame code and paste it into your website:

HTML/Code Editor: Paste directly into your HTML
Website Builder: Use "Custom HTML" or "Embed Code" block
CMS: Add to HTML block, custom HTML widget, or text editor (HTML mode)

Warning

Make sure to paste the code in HTML mode, not visual/rich text mode. If you paste in visual mode, the code will appear as text instead of rendering the timer.

Security Considerations

Modern browsers implement security features for iFrames to protect users:

Security Feature	What It Does	gettickr.app Compatibility
HTTPS Requirement	Many sites only allow HTTPS iFrames	✅ gettickr.app uses HTTPS
X-Frame-Options	Controls who can embed the content	✅ Allows embedding
CSP Headers	Content Security Policy restrictions	✅ Whitelisted
Sandbox Attribute	Restricts iFrame capabilities	⬜ Not needed for timers

Information

Gettickr.app timers are designed to work safely in iFrames without requiring special security configurations. Default browser security settings work perfectly fine.

Optional Sandbox Attribute

If your website security policy requires it, you can add sandbox restrictions:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  style="border: none;"
>
</iframe>

Warning

Only add sandbox attribute if specifically required by your security policy. It can restrict timer functionality if not configured correctly.

Performance Optimization

Lazy Loading

Defer loading iFrames until they're near the viewport:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  loading="lazy"
  style="border: none;"
>
</iframe>

Benefits:

Faster initial page load
Reduced bandwidth for users who don't scroll to timer
Better performance on mobile devices

Tip

Use loading="lazy" for timers that appear below the fold (not immediately visible when page loads).

Performance Best Practices

Practice	Why	How
Single Timer Per Page	Minimize resource usage	Use one timer, not multiples
Appropriate Size	Don't load huge iFrames unnecessarily	Match design dimensions
Lazy Loading	Load only when needed	Add `loading="lazy"`
Avoid Nested iFrames	Complexity hurts performance	One level only

Troubleshooting

Timer Not Appearing

Problem	Solution
Blank space where timer should be	Verify timer URL is correct
No iFrame visible at all	Check HTML mode (not visual editor)
Error message in iFrame	Timer may have been deleted or URL is incorrect
Black screen	iFrame dimensions may be incorrect

Tip

Open the timer URL directly in a browser to verify it works before troubleshooting the iFrame embedding.

Sizing Issues

Problem	Solution
Timer appears too small	Increase width and height values
Timer appears cut off	Check iFrame dimensions match timer design
Timer overflows container	Add `max-width: 100%` to iFrame
Unwanted scrollbars	Set `scrolling="no"` or `overflow: hidden`
Wrong aspect ratio on mobile	Implement responsive aspect ratio container

Platform-Specific Issues

Platform	Common Issue	Solution
WordPress	Visual editor strips code	Use Code Editor or HTML block
Wix	iFrame not allowed in text	Use HTML iFrame element from Add menu
Squarespace	Limited iFrame support	Use Code Block, not Text Block
Shopify	iFrame in liquid templates	Use proper Liquid syntax for HTML
Webflow	Embed element needed	Use Embed element, not HTML Embed

Warning

Some website platforms filter or restrict iFrame code for security. If your iFrame doesn't work, check your platform's documentation about embedding external content.

Browser Console Errors

Check browser developer console (F12) for error messages:

X-Frame-Options denied

Solution: Contact your website host - your site may be blocking iFrames.

Mixed Content: blocked loading insecure content

Solution: Ensure timer URL uses https:// not http://

CSP: frame-src violation

Solution: Update your Content Security Policy to allow gettickr.app

Next Steps

WordPress Integration - Platform-specific guide for WordPress
Shopify Integration - E-commerce timer setup
Custom HTML Integration - Advanced implementation techniques
Customize Timer Design - Make your timer match your website aesthetic

Tip

For platform-specific instructions beyond basic iFrame code, check out the dedicated integration guides for your website platform!