Why multiple NeetoCal embeds fail to load on a single page?

If you're embedding more than one NeetoCal scheduling link on a single page and notice that one or more of them fail to load, this could be due to how the embed code behaves when used multiple times. This guide explains the most common causes and how to fix them based on your embed type or the website builder you're using.

The Problem

When multiple scheduling links are embedded on the same page, only one may work. This issue can occur with any embed type:

• Inline embed

• Pop-up via sticky button

• Pop-up via custom trigger

• Iframe embed

Common causes include:

• Duplicate container IDs used in multiple embed snippets

• More than one floating pop-up embed (only one is supported per page)

• Website builder limitations (e.g., Card requires all embeds in a single <script> tag)

• Calling neetoCal.embed() multiple times without distinguishing elements

• Using a single self-closing iframe tag for multiple iframe embeds

Solutions

1. Use Unique IDs for Each Embed

Every scheduling link should have a unique container ID and corresponding element selector.

Example:

<div id="cal-one"></div>
<div id="cal-two"></div>

<script>
  neetoCal.embed({
    url: "https://cal.neetocal.com/your-link-1",
    type: "inline",
    elementSelector: "#cal-one",
  });

  neetoCal.embed({
    url: "https://cal.neetocal.com/your-link-2",
    type: "inline",
    elementSelector: "#cal-two",
  });
</script>

2. Use Only One Floating Pop-up Per Page

Only one floating pop-up is supported per page. If multiple are embedded, only the first one will appear.

If you need more than one link, switch to the elementClick type and assign different buttons:

<button id="btn1">Open Slot 1</button>
<button id="btn2">Open Slot 2</button>

<script>
  neetoCal.embed({
    url: "https://cal.neetocal.com/your-link-1",
    type: "elementClick",
    elementSelector: "#btn1",
  });

  neetoCal.embed({
    url: "https://cal.neetocal.com/your-link-2",
    type: "elementClick",
    elementSelector: "#btn2",
  });
</script>

3. Use One <script> Block in Website Builders (e.g., Card)

Builders like Card often restrict the use of multiple <script> tags. To avoid issues:

• Place all neetoCal.embed() calls inside a single <script> block.

✅ Works:

<script>
  neetoCal.embed({ ... });
  neetoCal.embed({ ... });
</script>

❌ Not recommended:

<script>neetoCal.embed({ ... });</script>
<script>neetoCal.embed({ ... });</script>

4. You Can Mix Embed Types

You may combine:

• One floating pop-up and

• One or more inline or elementClick embeds

Just ensure all container IDs and selectors are unique.

5. Use Proper Iframe Syntax

For multiple iframe embeds, avoid using self-closing tags like:

<iframe ... />

Instead, use separate opening and closing tags:

<iframe ...></iframe>

Otherwise, only the first iframe may load correctly.

Video Walkthrough

Watch this video where we demonstrate:

• What happens when multiple scheduling links are embedded?

• Why some of them fail to load?

• How to fix them using different embed types and best practices?

Summary

• Use unique container IDs and element selectors.

• Only one floating pop-up per page.

• Use elementClick for multiple custom triggers.

• Combine all embed calls inside one <script> when using builders like Card.

• Avoid self-closing iframe tags when embedding multiple iframes.