Help Center

Event Iframe Scroll-to-Top

How to Fix Scroll Position When Embedding Events on Your Website

When you embed your events on an external website using an iframe, clicking "View Details" or "Register" navigates within the iframe. By default, the parent page may not scroll to the top of the iframe, leaving visitors looking at the middle or bottom of the detail page.

This article explains how to ensure the page scrolls to the top of the iframe automatically whenever visitors navigate between event pages.

Updated Embed Code (Recommended)

If you copy the embed code from Marketing → Events → Public Link, the iframe snippet now automatically includes a companion script that handles scroll-to-top behavior. Simply re-copy the embed code and replace the old one on your website.

The updated embed code looks like this:

<iframe src="https://events.leadcenter.ai/events/YOUR_ID/list" width="900" height="600" style="border: none;"></iframe>
<script src="https://events.leadcenter.ai/js/lc-events-embed.js"></script>

Already Have the Iframe on Your Website?

If you already have the old iframe code on your website and don\'t want to replace it, simply add this single line anywhere on the same page (in the header, footer, or right after the iframe):

<script src="https://events.leadcenter.ai/js/lc-events-embed.js"></script>

No changes to your existing iframe tag are needed. The script automatically detects which iframe sent the scroll request and scrolls the page to the top of that iframe.

How It Works

1. When a visitor clicks "View Details", "Register", or any navigation link inside the events iframe, the iframe sends a message to the parent page.
2. The lc-events-embed.js script listens for that message and smoothly scrolls the page so the top of the iframe is visible.
3. This works regardless of how many iframes are on the page — each one is handled independently.

Troubleshooting

Page still doesn\'t scroll after adding the script

• Make sure the script URL is correct: https://events.leadcenter.ai/js/lc-events-embed.js
• Check that your CMS or page builder did not strip the <script> tag. Some builders require adding scripts through a dedicated "Custom HTML" or "Code Injection" section.
• Clear your browser cache and reload the page.

WordPress-specific instructions

In WordPress, you can add the script tag via:

• Custom HTML block — Add both the iframe and script tag inside a "Custom HTML" block in the page editor.
• Theme settings → Code Injection / Footer Scripts — Paste just the <script src="..."> line in your theme\'s footer scripts section. This way it loads on every page automatically.