Skip to main content
All CollectionsAI SchedulerEvents
Embedding the scheduler on your website
Embedding the scheduler on your website

How to embed the scheduler to the most commonly used CMS's (Content Management Systems)

Updated over 2 weeks ago

In this article we will cover how to embed iClosed scheduler to any of your web pages, with examples for most commonly used CMS systems.

Copying embed code

The first thing that you need to do is to copy the event embed code.
​
Navigate to AI Scheduler - Events, locate the event and click on the "Embed" button inside the event card.

Alternatively, you can click on the specific event to open event builder, and copy the the code by clicking on the "Embed" button from the top bar.

In both cases, a pop-up window will appear with the embed code. Simply copy the code and paste it in the iframe where you'd want the scheduler to be embedded.

Attention

Do not edit or change the embed code manually! iClosed scheduling widget is:

  • Fully optimized for all devices

  • Dynamic in terms of height adjustments, ensuring proper resizing based on content in the scheduler and ensures the iframe title dynamically updates with the event name.

  • Compatible with all most frequently used browsers, across all devices

In case you didn't make any manual changes to the embed code, but you've made updates to your Event URL or Company URL after the code has been placed to the webpage, the embed code will change and previous version that has been embedded will stop working.

If you've made a changes to Event URL or Company URL, iClosed will show warning message that the link has been updated, and to prompt you to place the latest version of the embed code to all of your webpages.

Embedding on WordPress website

Using custom HTML block

Go to your WordPress admin panel and login to start.

  1. Navigate to Pages on the left side bar, and open the page in edit mode where you'd want to embed the iClosed scheduler

  2. To add the custom HTML block, select the "+ Block" icon on the top navigation and search for "HTML"

  3. Once you have added the custom HTML block paste the iClosed embed code

Preview your changes to make sure that everything is copied perfectly

Using Elementor

The Elementor is a third party WordPress plugin, that allows you to easily customize and create a WordPress website. Here's a quick guide on how you can embed the iClosed scheduler to your WordPress website using Elementor plugin.

Go to your WordPress admin panel and login to start.

  1. Navigate to Pages on the left side bar, and open the page in Elementor edit mode, where you'd want to embed the scheduler

  2. In the Elementor search bar, search for HTML

  3. Paste the embed code inside the HTML Code editor and your scheduler will appear in the preview

  4. Update the changes and preview on your live page to make sure that everything is working properly.

In case you're experiencing any issues with scheduler not appearing on your webpage, please use Elementor Debugger which will help you understand what issues are you facing on the webpage and how to fix them.

Embedding on Webflow website

Step-by-step guide

Follow the steps to embed iClosed scheduler on the Webflow website.

Navigate to webflow.com and log into your account.

  1. Open project in the Designer mode

  2. Head to the page where you want to add the embed code

  3. Click on the "+ button" on the left side bar and search for Code Embed

  4. And click on it. Open the Embed Code editor by clicking on the setting icon on the element

  5. paste the iClosed embed code
    ​

  6. Click on "Save & Close", and push your updates to be live
    (or alternatively test the website)

Preview the changes to make sure that everything is working as expected.

Embedding on Framer website

Step-by-step guide

  1. Navigate to your Framer website management and select the "Assets" tab

  2. Create "Code file" - select New component
    ​

  3. Copy the code below and make sure to edit "PASTE_YOUR_LINK_HERE" and "PASTE_YOUR_TITLE HERE" with information from your embed code before saving
    ​

    import React, { useEffect } from "react"

    export default function Schedulers(props) {
        useEffect(() => {
            const script = document.createElement("script")
            script.src = "https://app.iclosed.io/assets/widget.js"
            script.async = true
            document.body.appendChild(script)

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

        return (
            <div
                className="iclosed-widget"
                data-url="PASTE_YOUR_LINK_HERE"
                title="PASTE_YOUR_TITLE HERE"
            ></div>
        )
    }

    ​
    Your code will look like this:
    ​

  4. Drag the file to preview it and adjust the size if needed
    ​

Embed on custom HTML site

To embed iClosed scheduler to your custom HTML site, all you need to do is to copy embed code and paste it in your HTML site.

You can learn more about HTML iframe embed here.

Best practices and FAQ's

Can I place iClosed iframe inside the iframe (parent)?

Yes, but it's not advisable since the iframe parent may block iClosed widget to show or to block redirecting to the secondary "Thank you" page after the call is booked.

This may also prevent iClosed iframe to interact with the HTML elements inside of the frame, in case you have set restrictions to Same-Origin policy on your website.

Is it possible to interact with HTML elements in the iClosed iframe?

No iframe allows you to edit HTML elements inside or out that of iframe, It's standard cross-origin-site restriction set by browsers.

What could be the reasons for scheduler not to display on my website?

Before proceeding with the troubleshooting steps, please make sure that the embed code provided by iClosed was not changed manually, and that is properly placed in the website builder.

Troubleshooting checklist:

  1. Check the browser console for errors (CSP violations, X-Frame-Options, CORS, JavaScript errors).

  2. Test on a different browser/device/network to rule out extensions or local issues.

  3. Verify the iframe source URL works directly in a browser.

  4. Inspect the parent page's CSS and JavaScript for conflicts.

  5. Contact the scheduler provider if the issue persists.

Additional reasons for the scheduler to be blocked from displaying are:

  1. Content Security Policy (CSP) restrictions

    Case: The parent site (where the iClosed iframe is embedded) or the iframe's source may have a CSP that blocks it.

    Solution: Ensure the CSP allows the iframe's source in the frame-src or default-src directive.

  2. X-frame-options header are preventing embedding

    Case: The source site of the scheduler may prevent embedding via the X-Frame-Options header (Common values: DENY or SAMEORIGIN)

    Solution: Check the headers of the iframe source. If you control the scheduler, modify the X-Frame-Options header to allow embedding

  3. Browser extensions or ad blockers are blocking iframe

    Case: Extensions like ad blockers or privacy tools can block iframes, mistaking them for ads or trackers.

    Solution: Test in an incognito/private browser session with all extensions disabled. Whitelist the site in the ad blocker settings.

  4. Cross-origin resource sharing (CORS) issues

    Case: If the scheduler iframe attempts to load resources from a different domain, cross-origin restrictions might block them.

    Solution: Ensure the scheduler's server has appropriate CORS headers, such as
    Access-Control-Allow-Origin: https://parent-site.com

  5. Website builder restrictions

    Case: Some website builders or themes may have restrictions or misconfigurations that prevent iframes from displaying.

    Solution: Check if the website builder supports iframe embedding. Ensure that iframe-related HTML tags are not being stripped or modified by the builder.

  6. Caching issues

    Case: Cached versions of the page might not reflect recent changes.

    Solution: Clear the browser cache or perform a hard refresh (Ctrl + F5 or Cmd + Shift + R). Clear any server-side cache, such as a CDN.

  7. Blocked by firewalls or network security

    Case: The iframe's content may be blocked by a firewall or network security settings.

    Solution: Test the site on a different network or device. Ensure the scheduler's domain is not blacklisted.

  8. Conflicting CSS or JavaScript

    Case: Styles or scripts on the parent page might conflict with the iframe's content.

    Solution: Inspect the iframe using browser developer tools to ensure it is not being hidden or overridden by CSS (z-index, overflow, etc.).

  9. HTTPS/HTTP mismatch

    Case: If the scheduler is hosted on a custom domain, DNS or SSL issues might prevent it from loading.

    Solution: Check the domain's DNS and SSL configuration.

  10. Incorrect or incomplete embed code

    Case: The embed code might be incomplete or missing necessary parameters.

    Solution: Double-check the embed code for correctness. Navigate to AI Scheduler - Events, locate the event and click on the "Embed" button inside the event card, and paste it again in webpage builder.

Learn more

Related Articles
Pre-populate form questions with invitee information
How to change language of my scheduler?
How to prevent iClosed from blocking personal events in my Google Calendar?
Scheduled calls filters
iClosed defense mechanism against spam or fake bookings
Did this answer your question?