Embed form

The embed form allows visitors of your website or blog to register for your webinar without having to leave your page.

Dina avatar
Written by Dina
Updated over a week ago

The embed form allows visitors of your website or blog to register for your webinar without having to leave your page The only thing you need to do is copy a bit of HTML-code and paste it on your website!

Editing the embed form

Discover more of our sales-based features here to collect and convert leads!

Creating an embed

To create an embed, you can follow the steps:

  1. Click on your webinar.

  2. Click on 'Edit webinar'.

  3. Navigate to 'Registration' > 'Embed'.

  4. Choose 'Create embed' to get into the editor.

Embed setting in webinar settings

Editing the form

You can change the colors of the title, subtitle and registration button.

Click on the textbox to edit the title or subtitle.

Press 'Styling' in the left side of the screen to change the colors to your taste or corporate brand.

The broadcast will only be visible after the webinar has been published.

Styling the WebinarGeek embed form

Place an embed code on your own website

To place the embed code on your own website, you can follow the steps:

  1. Click on your webinar.

  2. Click on 'Edit webinar'.

  3. Navigate to 'Registration' > 'Embed'.

  4. Choose 'Create embed' to get into the editor.

  5. Place the code on your own website.

Embed form with Javascript

After editing your embed form you’ll get a bit of HTML- and Javascript code from us. This code can be placed on your website/blog. You can choose a location to show the embed form. Remember that the embed form requires a minimum of 350 px in width.

Embed code

If you’re using a custom CMS-system or a blog like Wordpress, remember that the code needs to be placed in the 'source' of the page, so don’t paste it as plain text.

For some CMS-systems it’s not possible to add custom Javascript code, so you might need some help from your website technician.

Adjusting the width and height of the embed form (javascript)

While the Javascript embed automatically sizes itself in the available space, it's still possible to add styling to the resulting form, by using CSS.

Example:

.geek-frame-holder iframe { width: 700px }​ 

Embed form via an iframe

You can also embed your registration form via an iframe, useful for content management systems where its not easy or possible to use Javascript. Create an iframe element on your webpage and embed the iframe URL from the embed page.

Example:

<iframe src="Your iframe URL goes here" title="Webinar registration form" height="350" width="350" ></iframe>

Adjusting the width and height of the embed form (iframe)

You have to make sure the iframe has the proper height, as it will not automatically adapt. If you only see part of the form, increase the height of your iframe. You can do so by changing the value of "height" in the example code.

Make sure to set a width for the iframe; it's optimized for around 350 pixels in width. However you can increase the width if you like, or set a percentage to have it fill out the space on your website.

Example:

<iframe src="Your iframe URL goes here" title="Webinar registration form" height="500" width="100%" ></iframe> 

Advanced adjustments

Please note that the adaptability of the form is limited. If you’d like more customization and want to design the entire registration process according to your wishes and have it under full control, feel free to use our API instead. Contact us for more information.

Attaching custom registration links

When you’ve created custom registration links, you might want to use them in your embed form as well.

These custom links allow you to save the source of the registration, such as when using a UTM or campaign URL. When you’ve got multiple embed forms, you have the option to track the embed form the registration originates from.

You can attach this value inside the embed code as a so-called 'data-cst' parameter.

Here’s what you can do. In the embed form code, before the text 'data-webinar=..', add the following: data-cst="your_link_name_here".

In which you should replace your_link_name_here for the name you just used to generate the custom registration link, or the campaign parameter, such as 'linkedin' or 'facebook'. You code will now look a little something like this:

<script src="https://app.webinargeek.com/assets/embed-frame.js" data-cst="name_of_link" data-webinar="ca5c3.." type="text/javascript"></script>

After registration you’ll be able to see in your webinar statistics which link registrants used to register. Click here for more information about custom registration links.

In case of an Iframe, you can add '?cst=Linkedin' to the end of your Iframe URL, 'Linkedin' can be replaced with a variable for example the source of registration or a campaign parameter. Example:

<iframe src="https://embed.webinargeek.com/xxxxxxxxxxxxx?cst=Linkedin" title="description" height="350" width="350" ></iframe>

Please note! The height will need to be adjusted if your form has multiple extra fields.

Custom confirmation URL

After people registered using your embed form, you can redirect them to a custom confirmation URL.

To do this, follow the steps:

  1. Click on your webinar.

  2. Click on 'Edit webinar'.

  3. Navigate to 'Registration' > 'Embed'.

  4. Click on the pencil icon under 'Redirect users to a custom URL after sign-up'.

  5. Set your custom URL and click on 'Save'.

Setting a custom confirmation URL

Your registrations will now be automatically redirected to the newly added URL.

Please note! The newly added URL should contain "https://" in order to work.

Please note! 1,5 hours before the webinar starts, subscribers will see the countdown or watch page and will not be redirected to the newly added custom URL.

For paid webinars, the WebinarGeek confirmation page has to be used due to the required payment procedure.

Keywords: integrate

Did this answer your question?