How to create a BigMarker and Slido webinar template within your Zapnito content

We make it possible to create a beautiful, professional webinar integration that can be added to your Zapnito post content. Here's how to set it up.

Firstly, if you haven't already, you will need to sign up to BigMarker and Slido. Both providers offer free trials so if you're not quite satisfied with the service, you can easily cancel your subscription at any time.

Set up the webinar template

Navigate to the post that you will be embedding the webinar into and click the 'Source code' button in the post editor.

From here, you will be able to insert the webinar template into your post, which you can copy below.

<div class="my-8 mx-breakout">
<div class="flex items-center justify-between h-screen">
<div class="w-full md:w-3/4 h-full">
<iframe width="100%" id="bigmarker_embed_conference_room" src="https://www.bigmarker.com/your-url" allowfullscreen="allowfullscreen" frameborder="0" class="h-screen"></iframe>
</div>
<div class="w-full md:w-1/4 h-full">
<iframe width="100%" src="https://app.sli.do/your-url" frameborder="0" class="h-screen"></iframe>
</div>
</div>
</div>

Note the URLs highlighted in bold within the <iframe> codes for BM and Slido, as you will update these with your unique URLs later on in the process.

Obtain the embed codes

Once you have created your BigMarker webinar and Slido widget, you will need to generate an embed code for each, in order to add them to the template within the post.

BigMarker

Please refer to BigMarker's support resources if you are unsure on any aspect of setting up your webinar.

Under the 'Manage Webinar' tab, navigate to the Dashboard page using the menu on the left-hand side of the page. Scroll down to the very bottom of this page where you will find the option to Embed Webinar Into Your Website.

Click the 'Embed Your Webinar' button, which will present you with your embed code. The only portion of the code you will need to copy is the src URL.

Head back to the source code section of your post and paste the src URL into the corresponding slot within the webinar template, as illustrated below.

<iframe width="100%" id="bigmarker_embed_conference_room" src="https://www.bigmarker.com/your-url" allowfullscreen="allowfullscreen" frameborder="0" class="h-screen"></iframe>

Slido

As with BM, please refer to Slido's support resources if you are unsure on any aspect of setting up your Slido event.

In your 'Event settings', select Integrations in the left-hand menu and scroll down until you find the 'Embed Slido' tab.

Once again, the only portion of the embed code that you need to copy over is the src URL.

Head back to the source code section of your post and paste the src URL into the corresponding slot within the webinar template, as illustrated below.

<iframe width="100%" style="" src="https://app.sli.do/your-url" frameborder="0" class="h-screen"></iframe>

Once you have inserted both URLs into the template, don't forget to hit save.

That's all there is to it!

You will now be able to host a webinar within a piece of content on your Zapnito site. We've even gone the extra mile to ensure that the integration is responsive all the way down to mobile devices, so your attendees will be able to watch from anywhere!

Want to learn more about embedding external content into a Zapnito post? Check out this guide.