How to choose, configure, install, and customize eWebinar's marketing widgets to create your own landing page or promote your webinar on your website or blog.
eWebinar's embeddable widgets are designed to let you create your own registration pages or help you promote your webinars in an effective, attention-grabbing manner — without having to write your own code.
There are three main types of widgets:
- Widgets for your own registration page
- Widgets for your own registration thank you page
- Widgets for website pages (like your homepage) and blogs
You may access our widgets from the eWebinar home page by clicking the Widgets button on any particular webinar, since widgets are webinar-specific.
When you click Widgets, a dialog will open where you can choose and configure one of the widgets and then easily copy its code to paste into a third-party page builder.
Once you have chosen the widget you wish to use, you will need to:
For instructions for using widgets on specific platforms, refer to these articles:
- VIDEO - How do I use eWebinar widgets on my Hubspot landing page? (1m 19s)
- How do I use eWebinar widgets in my WordPress pages?
- How do I use eWebinar widgets on my SquareSpace site?
Did your widget not update itself automatically after changing the title of your webinar?
If so, and you use the Pop-up or Card widget, read this article for the solution.
THREE TYPES OF WIDGETS TO CHOOSE FROM
1. Widgets for registration pages
There are three types of widgets you can use when building your own registration page: a Button widget, Fixed bar widget, or Embed form.
IMPORTANT: For reasons of privacy and security, you cannot have people register for your webinars via a third-party product (i.e. using a form from your CRM) and then push the registrants into eWebinar. Instead, if you want registration to happen on a landing page outside of eWebinar, YOU MUST USE ONE OF OUR REGISTRATION WIDGETS.
Two main benefits of using our registration widgets are:
- reCaptcha makes sure bots don’t register using your forms which could lead to tens of thousands of bogus registrants within the span of an hour.
-
We verify that emails are valid during the registration process, which means the emails you get are much higher quality than you would on standard forms.
Button widget
The Button widget lets leads register for your eWebinar without navigating away from your page, by opening the registration form in a modal window when clicked.
Fixed bar widget
The Fixed bar widget can be used elsewhere but is typically used as the main widget of any webinar registration page. This is because it is always visible as it slides up from the bottom and stays fixed at the bottom of the page as people scroll — with a countdown timer to your next webinar session!
Embed form widget
The embed form widget is a very simple embeddable form with only two fields: Name and Email. The purpose of the embed form is to reduce the friction of registration by making it super simple.
IMPORTANT: You may not add more fields to the embed form. If you want to include other fields in your registration form, use the Button or Fixed bar.
To learn more about the Embed form, including what it is best used for and how to set it up, check out this post we wrote about it when it was first launched.
2. Widgets for registration thank you pages
There are two types of widgets you can use when creating a custom thank you page — the page registrants are sent to after they've successfully submitted your registration form. They are a Card widget and Button widget.
Card widget (for registration thank you pages)
Most people should use the Card widget for their registration thank you pages, since it has all the logic built into it that is necessary to display the right button to the registrant, whether that's a button for them to join a session starting right away, watch a replay, or add a future session to their calendar .
The card widget also shows the date and time of the session the user signed up for, and includes a link for them to join their session.
Button widget (for registration thank you pages)
The Button widget gives you the freedom to customize the look of your thank you page completely ,but requires coding on your part to do so effectively.
This widget simply shows a button. All other information is available as query parameters as on the URL but are not shown. (Again, this requires custom coding.)
The button widget is a smart button that lets the registrant:
- Click to watch a replay if they registered for one
- Join a session immediately if it is starting soon
- Add their session to a calendar if it is in the future
Important note about testing thank you widgets
If you want to test a thank you widget after installing it, be aware that if you navigate to the thank you page directly, the widget will not have the registration form data required to display correctly and it will look like it doesn't work.
To test a thank you widget, you must fill out the registration form and be taken to the thank you page as the result of completing the registration.
3. Widgets for website pages and blogs
There are two types of widgets ideal for your main website or blog. They are a Pop-up widget and Card widget.
Pop-up widget
The Pop-up widget is the most popular widget used by eWebinar customers. It surfaces your webinar to visitors and prospects in a way that's easily discoverable but not obtrusive. It appears at the bottom of the screen and can be configured to show up on the left side, right side, or in the middle, with different options for desktop and mobile.
The pop-up widget automatically shows the title of your webinar even if you change it after installing the widget. Note it will instead show the social sharing title if you entered it in your webinar's Settings tab. Also note the widget will not show if there are no sessions available to register for.
Card widget
The Card widget allows you to promote your webinar as part of an existing piece of content, like a blog post or landing page.
Check out this article from our blog as an example of how to use this widget. You'll see we have embedded three different places — near the beginning, in the middle, and at the end — to promote our on-demand demo.
You can also use card widget to create a custom web or landing page listing all of your available webinars, like we did with our webinar library.
The card widget has the HTML required to render the card within it. That means if you change the social sharing title or description of your webinar you'll have to re-generate the widget code, copy and replace any existing cards to have the information update.
CONFIGURE, INSTALL & CUSTOMIZE THE WIDGET
Configure the widget
Though each widget has its own unique settings, the process of configuring a widget is the same for all of them. Here is how to do it:
- Open the Widget dialog box for the webinar in question by clicking Widgets.
- Select the type of page the widget is for, a Registration or Marketing page or a Thank you confirmation page.
- Next, select the style of widget you would like to use, from the available choices. When you do, you will see a preview of the widget appear on the left
- Configure the settings of the widget. As you configure the widget, you will see the preview on the left update accordingly.
- Copy and paste the code into the body of the HTML for your website. You may need help from your IT administrator for this step or from the support team of whatever third-party page builder you are using, like LeadPages or SquareSpace.
Below is an example of what the pop-up widget looks like after being configured. The next step here would be to copy the code and paste into the code of the page where you would like the pop-up to appear.
In this case, the pop-up widget shown above has been configured as follows:
- To appear on the left-hand side of the bottom of the screen on desktop
- To appear in the center of the bottom of the screen on mobile
- For the registration form to open up on the page itself — so the registrant doesn't need to go somewhere else first before registering
- For the button text to say 'Join the next demo!'
- For the Widget source to be called 'homepage' — so that when someone registers via this widget, I'll be able to see which widget who it was
Install the widget
Though the installation process for widgets will vary based on the third-party page builder you use, the workflow is essentially the same.
As an example, here is a short video showing the process of installing the Embed form in a Hubspot landing page, to give you an idea of what to expect:
For most webpage builders, it is fairly straightforward to add custom HTML code inside the <body> tag of your page and have that work automatically. If you would like to see another example, look at these installation guides for Wordpress and SquareSpace.
Customize your widget
If after installing one or more widgets onto your page you need to further customize the look of it, CSS is your friend.
Every part of an eWebinar widget uses a different class name. This means you can specify custom CSS to override colors, fonts, sizes or even hide specific parts of a widget. What you should never do is remove code from within the widget HTML you copy/paste as that could break your widget as we update the eWebinar service.
Following are some examples of custom CSS for the more popular customizations.
Change the font & size of all Registration buttons
<style>
.ewebinar__RegisterButton {
font-family: 'pragmatica', sans-serif !important;
font-size: 30px !important;
}
</style>
Change the font size of a particular Registration buton
<style>
#w1627034837426 .ewebinar__RegisterButton {
font-size: 30px;
}
</style>
Remove the minimize button from the pop-up widget
<style>
.ewebinar__FloatIn__Cross {
display: none;
}
</style>
Change the font color of field labels in the embed form to white
<style>
.ewebinar__RegForm__Field__Label {
color: #fff;
}
</style>