How to Embed a Zoom Scheduler in a Digioh Campaign

What You'll Learn in This Article

• How to add a Zoom Scheduler booking page to a Digioh Campaign using an HTML block
• (Advanced) How to pass a visitor's submitted name and email into the Zoom Scheduler so their booking page arrives pre-filled

You can embed a Zoom Scheduler booking page inside a Digioh Campaign, similar to how you'd embed Calendly or a HubSpot Calendar. This is commonly used on a Thank You Page or Extra Page after a lead form or demo request, so a visitor can book time on your calendar immediately after submitting their information.

Before You Begin

You'll need a Zoom account with Scheduler enabled (Scheduler Basic or a paid Scheduler license) and a booking page already created. In Zoom, do the following before you touch Digioh:

1. Sign in to your Zoom web portal and go to Scheduler.
2. Open the booking page you want to embed, click Share, then Add to Website.
3. Enter your website's Origin in the field provided, this is the domain the campaign will actually run on (for example, www.yoursite.com). Zoom uses this to validate where the scheduler is allowed to load.
4. Copy the booking page URL. It will look like https://scheduler.zoom.us/d/your-handle/your-page.

Section 1: Basic Setup - Embedding the Calendar

This section displays the Zoom Scheduler as-is. It does not pass any visitor data into it, so the visitor will need to enter their name and email again on the Zoom booking form. If you'd rather have those fields pre-filled from the Digioh form the visitor just submitted, skip to Section 2.

Step 1: Add an HTML Block to Your Campaign

1. Open the Campaign in the Digioh Design Editor.
2. Navigate to the page where you want the calendar to appear, typically a Thank You Page or Extra Page placed after your lead form.
3. Click the HTML tab for that page.
4. Click + Add HTML Block.

Step 2: Paste the Embed Code

Paste the following into the HTML field, replacing the src URL with your own booking page link from Zoom. Keep ?embed=true in the URL, it tells Zoom to render the compact, iframe-optimized layout.

<div style="max-width: 900px; margin: 0 auto;">
<iframe
src="https://scheduler.zoom.us/d/your-handle/your-page?embed=true"
style="width:100%; min-height:560px; border:0;"
frameborder="0">
 </iframe>
</div>

Adjust min-height (typically 560–900px) depending on how much of the calendar you want visible without scrolling.

Step 3: Save, Test, and Publish

Once you've added the HTML element, you can test the campaign using Digioh's Preview mode to view your Zoom scheduler embedded in the campaign. 

Once you're satisfied with the design, save & publish the campaign to push the changes live!

Section 2: Advanced Setup - Passing Name & Email into Zoom

Zoom Scheduler booking pages accept firstname, lastname, and email as URL query parameters, and will use them to pre-fill the booking form. If your Digioh form already collects a visitor's name and email before they reach the calendar, you can carry that data forward automatically so they don't have to type it twice.

Step 1: Add an Empty Container Instead of a Static Iframe

On the page where the calendar should appear, add an HTML block containing only an empty container div. Custom JS will build the actual iframe into this container once the visitor's data is available.

 <div id="zoom-scheduler-container"></div>

Step 2: Add the Custom JS Snippet

In your accounts Custom JS, add a new snippet on the After Submit event and set it to apply to the campaign where you're embedding the Zoom scheduler:

In the snippet, paste the following JavsScript; it reads the visitor's submitted name and email from the form data object x, builds the Zoom Scheduler URL with those values, and injects the iframe into the container from Step 1.

// Box JS - After Submit
if (!boxapi.zoomInjected) {
    var jqContainer = $('#thxlayout').find('#zoom-scheduler-container');
 
    if (jqContainer.length > 0) {
        var zoomUrl = 'https://scheduler.zoom.us/d/your-handle/your-page'
            + '?embed=true'
            + '&firstname=' + encodeURIComponent(x.first_name || '')
            + '&lastname=' + encodeURIComponent(x.last_name || '')
            + '&email=' + encodeURIComponent(x.email || '');
 
        jqContainer.html(
            '<div style="max-width:900px;margin:0 auto;">' +
            '<iframe src="' + zoomUrl + '" style="width:100%;min-height:560px;border:0;" frameborder="0"></iframe>' +
            '</div>'
        );
 
        boxapi.zoomInjected = true;
    }
}

Step 3: Update the Two Placeholders

• Replace the src URL with your own Zoom Scheduler booking page link, keeping ?embed=true.
• Replace #thxlayout with the container ID for whichever page actually holds the calendar. Digioh names these #layout for the Main Page and #ep1layout, #ep2layout, etc. for Extra Pages, using the pattern #<page>layout.

Step 4: Save and Publish your JavaScript

After you've added your JavaScript snippet, select Save and Publish Live to ensure that the JavaScript is active.

Step 5: Save, Test, and Publish

Once you've added the HTML element and JavaScript snippet, you can test the campaign using Digioh's Preview mode to view your Zoom scheduler embedded in the campaign. 

Once you're satisfied with the design, save & publish the campaign to push the changes live!

Questions or comments? Reach out to our support team at support@digioh.com and we'll be happy to help.