While simple <iframe> embeds are supported, we highly recommend using a JavaScript (JS) integration whenever possible.
Why use JavaScript?
Integrating via JS provides a seamless user experience and allows for a deeper integration between the third-party widget and your campaign. Most importantly, it allows you to listen for specific actions (like a form submission or a booked meeting) and trigger Wisepops conversion tracking. By tracking conversions via JS, you ensure that campaign display rules function perfectly (e.g. "Stop showing after the visitor has signed up").
Method 1: JS callbacks (recommended)
Widgets embedded via JS typically consist of two parts:
an empty
<div>element that acts as a container,and a
<script>tag that loads the widget.
Because <script> tags cannot be pasted directly into our HTML blocks, you need to separate them using a JS callback.
Step 1: Create an HTML block for the container
Add an HTML block to your popup and paste only the <div> portion of the embed code. Choose the position in your popup where the widget should appear.
Step 2: Create a JS callback to load the script
Set up a JS Callback with the Before popup display event. In this callback, you will recreate the script loading logic using plain JavaScript.
Important: Wisepops and the Shadow DOM
Wisepops campaigns are rendered inside a Shadow DOM. This prevents your website’s CSS from conflicting with the campaign's design, but it also means that global DOM selectors (like document.querySelector) cannot pierce through and find elements inside the popup.
When initializing a third-party script, passing a string selector for the target element will not work. You must dynamically retrieve the container element within the popup and pass the element object itself.
❌ Incorrect:
initWidget({
url: 'https://example.com/my-widget',
element: '.my-widget', // Cannot find the element in the Shadow DOM
});
✅ Correct:
initWidget({
url: 'https://example.com/my-widget',
element: event.target.querySelector('.my-widget'), // Element found
});
Here are examples of how to implement this with popular services:
Example 1: Calendly
1. HTML Block:
<div class="calendly-widget" style="height:500px;"></div>
2. JS Callback (Before popup display):
// Retrieve the container from inside the Shadow DOM
const container = event.target.querySelector('.calendly-widget');
// Load the Calendly script
const script = document.createElement("script");
script.src = "https://assets.calendly.com/assets/external/widget.js";
document.body.appendChild(script);
script.onload = function () {
// Initialize the widget
Calendly.initInlineWidget({
// Set your Calendly URL here
url: 'YOUR_CALENDLY_URL',
parentElement: container,
});
};
Example 2: Typeform (with conversion tracking)
Integrating Typeform via JS allows you to track a form submission as a Wisepops conversion using the trackClick() method.
1. HTML Block:
<div class="typeform-widget" style="height:500px;"></div>
2. JS Callback (Before popup display):
// Retrieve the container from inside the Shadow DOM
const container = event.target.querySelector('.typeform-widget');
// Inject Typeform's required CSS directly into the Shadow DOM
const cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = '//embed.typeform.com/next/css/widget.css';
event.target.appendChild(cssLink);
// Load the Typeform Embed script
const script = document.createElement('script');
script.src = "//embed.typeform.com/next/embed.js";
document.body.appendChild(script);
script.onload = () => {
// Initialize the widget
window.tf.createWidget('YOUR_FORM_ID', {
container: container,
onSubmit: function () {
// Flag the popup as clicked in Wisepops
event.detail.popup.trackClick();
}
});
};
Method 2: Iframe blocks
If a service only provides an <iframe> snippet and you do not need advanced event tracking, you can use the built-in Wisepops Iframe block.
For example, if a service provides an embed code like this:
<iframe src="https://example.com/widget-url" width="600" height="450"></iframe>
Add an Iframe block in the Wisepops editor.
Copy the URL found in the
srcattribute (in this case,https://example.com/widget-url).Paste it into the block's URL field.
Wisepops also has dedicated blocks for standard videos like YouTube and Vimeo.