JavaScript desativado Este app precisa de JavaScript para funcionar. Ative-o nas configurações do seu navegador. Atualizar página

Conexão perdida

Tentando reconectar

Back to Overview

Widget Embedding

Add your booking page to any website in one of four ways: inline, popup, direct link or floating button. Step-by-step guides cover WordPress, Webflow, Wix, Squarespace, Shopify and plain HTML.

Luka Breitig

Atualizado em 11 de agosto de 2026

✅ Before You Start

Your booking link goes live once you have a username and at least one connected calendar. Before you embed it, check that you have:

A username set in your profile
At least one calendar connected
Your meeting types and availability set the way you want them
Your website's domain added under Embed & Share → Security (embedding is blocked until you add one; the direct link works without it)

Check Your Status

Visit Dashboard → Embed & Share and open the Live Preview tab. If your booking link isn't ready yet, a "Link Deactivated" warning tells you what's missing.

Four embedding methods

1. Inline Embed

Sits in your page content and resizes to fit. Best for dedicated booking pages.

2. Popup Modal

Opens in an overlay on top of your page. Best for call-to-action buttons and hero sections.

3. Direct Link

A plain link to your booking page, with no script. Easiest for emails and social media.

4. Floating Button

A round button in the bottom-right corner that stays visible as visitors scroll.

1 Inline Embed (Recommended)

The inline embed places your booking widget directly into your page content. It needs the least setup.

Basic Usage

<div id="tymeslot-booking" data-username="your-username"></div>
<script src="https://your-domain.com/embed.js"></script>

A Tymeslot booking widget embedded inline within a marketing website's page content — The inline embed renders the booking widget right inside your page.

Best For:

Dedicated booking pages
Service or product pages
Contact pages

2 Popup Modal

The popup modal opens your booking widget in an overlay on top of your page when a visitor clicks a button or link.

Basic Usage

<button onclick="TymeslotBooking.open('your-username')">
  Book a Meeting
</button>
<script src="https://your-domain.com/embed.js"></script>

Trigger from Any Element

Any clickable element can open the popup, such as a link, an image or your own styled button:

<!-- From a link -->
<a href="#" onclick="TymeslotBooking.open('your-username'); return false;">
  Schedule a Call
</a>

<!-- From a styled button -->
<button class="my-custom-button" onclick="TymeslotBooking.open('your-username')">
  📅 Book Your Free Consultation
</button>

Best For:

Call-to-action buttons in hero sections
Navigation menu items
Promotional banners

3 Direct Link (Easiest)

The simplest option: a plain link to your booking page. It needs no script and no allowed domains, so it works anywhere you can post a URL.

Basic Usage

<a href="https://your-domain.com/your-username">
  Schedule a meeting
</a>

Best For:

Email signatures
Social media bios (LinkedIn, Twitter, Instagram)
Email campaigns and newsletters

4 Floating Button

A round button fixed to the bottom-right corner that stays visible as visitors scroll, like a chat widget for booking. Clicking it opens the booking popup.

Basic Usage

<script src="https://your-domain.com/embed.js"></script>
<script>
  TymeslotBooking.initFloating('your-username');
</script>

A floating booking button fixed in the bottom-right corner of a website — The floating button stays pinned in the corner as visitors scroll.

Customise the Button Colour

TymeslotBooking.initFloating('your-username', {
  buttonColor: '#14B8A6'  // Tymeslot Turquoise
});

Best For:

Multi-page websites where booking should always be accessible
Corporate websites
Landing pages where you want maximum visibility

🌐 Platform-Specific Integration Guides

Step-by-step instructions for popular website builders, each of which adds custom code in its own way.

🔷

WordPress

Open Your Page Editor

Go to Pages → Add New or open an existing page in the Block Editor.

Add a Custom HTML Block

Click the + button where you want the widget, then search for "Custom HTML".

💡 Tip: type /html in the editor as a shortcut.

Paste Your Embed Code

Copy the inline embed code from Dashboard → Embed & Share and paste it into the HTML block.

<div id="tymeslot-booking" data-username="your-username"></div>
<script src="https://your-domain.com/embed.js"></script>

Preview & Publish

Click Preview to see how it looks, then Publish or Update your page.

⚠️ Common WordPress Issues:

• Page builders such as Elementor or Divi have their own "HTML" or "Code" widget: use that instead.
• Some themes strip JavaScript. Check that yours allows custom scripts.
• If the widget doesn't load, a caching or optimisation plugin may be blocking or deferring the script. Clear the cache after adding the code.

💠

Webflow

DESIGNER FRIENDLY

Webflow's Code Embed element takes the embed code as-is, so you can place the widget anywhere in your layout.

Open the Webflow Designer

Open the page that should hold the booking widget in the Designer.

Choose a Container

Select the container or section where the widget should appear. Leave its height on Auto: the widget resizes itself to fit its content.

💡 Tip: a dedicated Div Block with a class such as "booking-widget-container" makes the widget easier to space and align.

Add a Code Embed Element

From the Add panel on the left, drag a Code Embed element into your container.

Location: Add panel → Advanced → Code Embed

Paste Your Code

The code editor opens straight away. Paste your Tymeslot embed code, then click Save & Close

Preview & Publish

Publish your site, then open the published page to test the widget.

⚠️ Note: Webflow doesn't run custom scripts in the Designer, so the widget only appears on the published site. If you test on your webflow.io staging address, add that domain to your allowed embed domains too.

🎨 Webflow-Specific Tips:

• Don't give the embed element a fixed height or max-height: the widget then scrolls inside the box instead of growing to fit.
• For a floating button on every page, add its code to the site-wide footer code (Site settings → Custom code → Footer code).
• If the popup opens behind a sticky header or another element, lower that element's z-index below 999999, the value the popup uses.

◆

Wix

DRAG & DROP

Wix adds custom code through its HTML iframe element. The steps below use the Wix Editor; Wix Studio works the same way (see the tips at the end).

Open the Wix Editor

Add a Custom Embed

Click the Add (+) button on the left sidebar, then navigate through the menus:

Path:

Embed → Embed a Widget → HTML iframe

💡 Shortcut: search for "HTML" in the Add panel.

Configure the HTML Element

An HTML iframe box appears on your page. Click Enter Code in the settings panel that opens.

Select "Code" (not "Website Address") at the top of the settings panel.

Paste Your Embed Code

Copy the inline embed code from Dashboard → Embed & Share and paste it into the code editor.

<div id="tymeslot-booking" data-username="your-username"></div>
<script src="https://your-domain.com/embed.js"></script>

Resize & Position

Drag the corners of the HTML element to resize it. Unlike other builders, Wix keeps this box at a fixed size, so make it big enough for the whole booker, at least 800px wide × 700px tall

💡 Tip: use the alignment guides to centre the widget on your page.

Click Update & Publish

Click Update in the settings panel, then Publish your site to make it live.

🔧 Wix Troubleshooting:

• If the widget appears blank or cut off, make the HTML element taller (at least 700px).
• A brief "Loading..." message is normal while Wix loads the external content.
• In Wix Studio, the "Embed" option is in the Elements panel; the other steps are the same.
• Your site must load over HTTPS: allowed embed domains only cover https:// pages.

■

Squarespace

PREMIUM

Squarespace's Code Block takes custom HTML on both 7.0 and 7.1 sites. Squarespace only runs scripts on plans that support custom code, so check your plan if the widget doesn't appear.

Enter Edit Mode

Navigate to the page where you want to add the widget, then click Edit in the top left.

Choose Your Insertion Point

Hover over the area where you want to add the widget. Click the + (insert point) that appears between content blocks.

💡 Tip: the widget works in any section or column layout.

Add a Code Block

In the block menu, it's under the "More" category. Search for or select Code

Path:

Insert Point → More → Code

Configure Code Block Settings

A code editor appears. Check these settings:

• Display Source: Unchecked (hide raw code from visitors)
• Mode: Set to HTML

Paste Your Embed Code

Copy your embed code from Dashboard → Embed & Share and paste it into the code editor.

<div id="tymeslot-booking" data-username="your-username"></div>
<script src="https://your-domain.com/embed.js"></script>

Apply & Save

Click Apply to close the code editor, then click Save in the top left to publish your changes.

⚠️ Changes won't appear until you click Save.

🎯 Squarespace-Specific Tips:

• For a floating button on every page, add its code under Settings → Advanced → Code Injection → Footer
• If the widget looks cut off, drag the code block's bottom edge to give it more room.
• Squarespace 7.0 and 7.1 menus differ slightly, but both have the Code Block.
• Preview on mobile before you publish: the widget adapts to narrow screens, but check that your layout gives it the full width.

🛍️

Shopify

E-COMMERCE

Let customers book product consultations, personal shopping sessions or support calls from your Shopify store.

Navigate to Pages

Create a new page (for example, "Book a Consultation") or edit an existing one under Online Store → Pages

Add the Embed Script

Shopify's page editor strips <script> tags, so the embed script must be added separately. Go to Online Store → Themes, open the ⋯ menu next to your theme, choose Edit code, and add this line to theme.liquid just before </body>:

<script src="https://your-domain.com/embed.js"></script>

Add the Booking Container

Back in your page, click Show HTML (the <> icon) and paste the container div:

<div id="tymeslot-booking" data-username="your-username"></div>

Save Your Page

Click Save in the top right. The widget is now live on that page.

💼 E-commerce Use Cases:

• Product Consultations: Add a "Book a Consultation" button to product pages for high-value items.
• Personal Shopping: Create a dedicated "Personal Shopper" page for VIP customers.
• Custom Orders: Let customers book calls to discuss custom products or bulk orders.
• Customer Support: Offer video support sessions for complex product questions.

🎯 Shopify-Specific Tips:

• Since the script is in theme.liquid, you can place the booking container on any page: the script already loads site-wide.
• Add your booking page to the main navigation menu so customers can find it.

⚡

Custom HTML / Static Sites

DEVELOPER

For plain HTML sites and JavaScript frameworks such as React, Vue or Next.js, where you control placement and styling yourself.

Add to Your HTML

Paste the embed code anywhere in your HTML body:

<body>
  <!-- Your content -->
  
  <div id="tymeslot-booking" data-username="your-username"></div>
  <script src="https://your-domain.com/embed.js"></script>
</body>

For React/Vue/Next.js

Load the script in your layout or component:

// In React/Next.js
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://your-domain.com/embed.js';
  script.async = true;
  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  };
}, []);

Programmatic Control

Use the JavaScript API to open the popup or embed the widget from your own code:

// Open modal programmatically
document.getElementById('my-button').addEventListener('click', () => {
  TymeslotBooking.open('your-username', {
    theme: '2',
    primaryColor: '#4F46E5'
  });
});

// Embed dynamically
TymeslotBooking.embed('#container', 'your-username');

🔧 Developer Tips:

• The script loads asynchronously and won't block page rendering.
• See the Customisation Options section above for the full list of parameters.
• If your site sets a Content Security Policy, add your Tymeslot domain to both script-src (for embed.js) and frame-src (for the booking iframe).
• The widget is responsive and adapts to its container's width.

Quick reference: which platform?

Platform	Best For	Difficulty	Recommended Method
WordPress	Blogs, business sites, portfolios	Easy	Inline Embed
Webflow	Designer portfolios, agencies	Easy	Inline Embed
Wix	Small businesses, personal sites	Moderate	Inline Embed
Squarespace	Creative professionals, boutiques	Easy	Inline Embed
Shopify	E-commerce, consultations	Easy	Inline or Popup
Custom HTML	Developers, full control	Easy	Any method

⚙️ Customisation Options

Options set the widget's theme, colour, language, layout and size. Pass them as a JavaScript object, or as data- attributes on an inline embed.

Option	Data attribute	Description
`theme`	`data-theme`	'1' (Quill) or '2' (Rhythm)
`primaryColor`	`data-primary-color`	Hex colour override (e.g. '#14B8A6')
`locale`	`data-locale`	'en', 'de', 'uk', 'fr', 'it', 'cs', 'pl', or 'pt'
`layout`	`data-layout`	`'default'` (centred, capped at about 640px; used when no layout is set) or `'column'` (fills its container at any width; the dashboard recommends it)
`initialHeight`	`data-initial-height`	Placeholder height in px shown before the iframe reports its content height (default: 400, range: 200–2000). `data-min-height` is accepted as a legacy alias.
`maxWidth`	`data-max-width`	Maximum width in px (default: 640, or 1000 with the column layout; range: 200–2000)
`buttonColor`	None	Floating button colour (hex). Only for `initFloating()`.

Every option is validated, and invalid values (such as a colour that isn't a hex code) are ignored without an error.

TymeslotBooking.open('your-username', {
  theme: '2',               // Theme ID (1=Quill, 2=Rhythm)
  primaryColor: '#14B8A6',  // Hex color
  locale: 'en',             // Force language
  layout: 'column',         // 'default' or 'column'
  maxWidth: '800'           // Max width in pixels
});

HTML Data Attributes

For standard inline embeds, you can use data- attributes to customise the widget directly in your HTML:

<div id="tymeslot-booking"
     data-username="your-username"
     data-theme="2"
     data-primary-color="#4F46E5"
     data-locale="en"
     data-layout="column"
     data-initial-height="600"
     data-max-width="800">
</div>

Programmatic Inline Embed

To place the widget in an element of your choice from your own JavaScript, call TymeslotBooking.embed:

// Embed into a specific container
TymeslotBooking.embed('#my-container', 'your-username', {
  theme: '1',
  primaryColor: '#14B8A6',
  locale: 'en',
  layout: 'column',
  initialHeight: '600',
  maxWidth: '800'
});

🔧 Troubleshooting

Widget Not Appearing?

• Check that your website's domain is listed under Dashboard → Embed & Share → Security. Until it is, the widget shows "This booking page can’t be embedded here" instead of your booker.
• Check that your booking link is active: the Live Preview tab shows a "Link Deactivated" warning if it isn't
• Check that the username in your code matches your dashboard exactly, and that the script URL points to your Tymeslot instance
• Open the browser console (F12) and look for JavaScript or network errors

"TymeslotBooking is not defined" Error?

The embed script has to load before you call its functions. Check that the <script> tag is present on the page and has finished loading.

Mobile Responsiveness Issues?

The widget is responsive, but it can only adapt if your page is too. Check that your page has a viewport meta tag in the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

HTTPS Required

Serve the website you embed on over HTTPS (and, if you self-host, your Tymeslot instance too). Allowed embed domains only cover https:// pages, so on a plain http:// page the widget is blocked.

Security & Domain Control

Choose which websites can show your booking page

Embedding Is Off Until You Allow a Domain

Embedding is disabled by default, so no other website can show your booking page. To embed it, add each domain you trust to your allowed list.

Your booking page then loads only on those domains. On any other site, visitors see "This booking page can’t be embedded here" instead of your booker.

How to Allow a Domain

1

Open Embed & Share

In your dashboard, open Embed & Share from the sidebar.
2

Open the Security Tab

Click the Security tab to show the "Security & Domain Control" panel.
3

Add Trusted Domains

Type a domain into Add Allowed Domain. To add several at once, separate them with commas (e.g. example.com, myportfolio.net). Adding example.com also allows www.example.com, and *.example.com allows every subdomain.

Don't include https:// or page paths
4

Add the Domain

Click Add Domain (or press Enter). The change applies straight away, and the domain appears as a tag you can remove later. Disable All Embedding clears the list and blocks every site again.

The Security and Domain Control panel in the dashboard, with a field to add an allowed embedding domain — The Security tab under **Embed & Share**: add each domain you trust, and every other site is blocked.

What This Protects Against

Unauthorised Embedding

Your booking page appears only on websites you approve

Brand Control

Other sites can't present your booking page as if you were affiliated with them

Clickjacking Risks

Blocks attacks that hide your booking page under a fake interface to trick visitors into clicking

💡

Tip: Testing on a staging or preview address? Add that domain too, then remove it when you go live.

🚀

Get your embed code

Open Embed & Share in your dashboard to copy code with your username already filled in. The Live Preview tab lets you try each method before you add it to your site.

Go to Your Dashboard

Guides for your profession

Many professionals put a booking widget on their own website. See how coaches , photographers , and web designers use it to turn visitors into booked clients.

🔗 Related Articles

WordPress Plugin

Add your Tymeslot booking page to WordPress with the official plugin: a Gutenberg block, a shortcode or a floating button. No code needed, and it works with Tymeslot Cloud and self-hosted instances.