WebinarJam and EverWebinar documentation Webinars for everyone!

Embeddable bar and button

You have two options to embed the webinar registration form straight into your own website, hosted on your own server/domain. Both options will, upon clicking, pop the registration form so your visitors can subscribe to your event.

  • The sticky footer bar
  • The embeddable button

Please note that both options will require some basic HTML and CSS coding skills on your end. If you don’t know HTML or CSS, any junior web designer will be able to do it for you for a very reasonable price.

 

The sticky footer bar

This option will overlay a horizontal bar at the footer of your page that will remain sticky as your users scroll down the page. By default, the bar is blue color but you can append some parameters to customize it.

The default embeddable code looks like this:

<script src=”https://event.webinarjamdev.com/register/XXXX/embed-bar”></script>

And the parameters you can append as suffixes are:

  • buttonText: string, default “Register” (the text inside the button)
  • buttonBgColor: default #000000 (the button color)
  • buttonBgOpacity: float between 0 and 1. Default 0.5 (the button transparency level)
  • barBgColor: default #29b6f6 (the bar color)
  • barBgOpacity: float between 0 and 1. Default 0.95 (the bar transparency level)

Here are some important reminders through:

  • All text, spaces and “#” symbols should be URL encoded. That means that the # symbol is “%23”, a blank space is “+”, etc.
  • You can chain-add multiple parameters by adding “&” before each new parameter added to the chain.

Here’s a sample of a customized footer bar:

<script src=”https://event.webinarjamdev.com/register/XXXX/embed-bar?buttonText=Subscribe+Now&buttonBgColor=%23cc44cc&barBgColor=%23ffffff“></script>

 

The embeddable button

The button is a standard HTML button that you can embed anywhere in your site. This is what it looks like:

<button type=”button” data-webinarHash=”XXXX”>Register</button>
<script src=”https://event.webinarjamdev.com/register/8xfn/embed-button”></script>

Like any other HTML <button>, you must add inline CSS attributes to style it up!

Here’s a sample of a customized button:

<button type=”button” data-webinarHash=”XXXX” style=”background-color:#000000; color:#ffffff;”>Register</button>
<script src=”https://event.webinarjamdev.com/register/8xfn/embed-button”></script>

© 2020 WebinarJam All Rights Reserved