Embeddable bar and button

You have multiple 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 Registration Bar
• The Registration Button
• The Registration Bubble
• The Registration Embedded Form

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 Registration Bar

The registration bar is a pop up at the bottom of the page that overlays on top of the webpage and looks like the following:

The button text, button color, and the bar’s color can all be customized.

The code will look something like this:

<script src="https://event.webinarjam.com/register/XXXXX/embed-bar?buttonText=Register&buttonBgColor=%23000000&buttonBgOpacity=0.5&barBgColor=%2329b6f6&barBgOpacity=0.95&formTemplate=2&formColor=1"></script>

*Please Note: You will want to copy this from your account interface and not from this documentation.

The Registration Button

The registration button will be a simple single button that will link users to their webinar registration and looks like the following:

 

The code will look something like this:

<div style="text-align:center;">
<button type="button" class="wj-embed-button" data-webinarHash="XXXXX" style="border: 2px solid rgba(0, 0, 0, 0.5); background: rgba(41, 182, 246, 0.95); color: rgb(255, 255, 255); font-size: 24px; padding: 18px 80px; box-shadow: none; border-radius: 4px; white-space: normal; font-weight: 700; line-height: 1.3; cursor: pointer; font-family: Roboto, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif; word-break: break-word; margin: auto;">Register</button>
<script src="https://event.webinarjam.com/register/XXXXX/embed-button?formTemplate=2&formColor=1"></script>
</div>

*Please Note: You will want to copy this from your account interface and not from this documentation.

Customization for the button includes the text, color, size, border style, shadow / no shadow options, and the shape.

The Registration Bubble

The registration bubble is a floating small toggle to open a registration link and text that looks something like this:

A registration bubble code can look something like this:

*Please Note: You will want to copy this from your account interface and not from this documentation.

Customizable parameters for bubble:

• buttonText: string, default “Register” (the text inside the button)

• buttonBgColor: default #29b6f6 (the button color)

• buttonBgOpacity: float between 0 and 1. Default 0.95 (the button transparency level)

• barBgColor: default #ffffff (the bar color)

• barBgOpacity: float between 0 and 1. Default 1 (the bar transparency level)

• type: string, “bubble”

• formTemplate: integer, the registration form template id. We have 4 templates (2, 4, 6, 8), default is template id 2

• formColor: integer, the registration form color variation id. We have 6 color variations for each template (1, 2, 3, 4, 5, 6), default is color variation id 1

*Please Note: Registration form template and color variations can be previewed in Webinars > Your links > Attendees > Embed in your website > Registration bubble.

The Registration embedded form

The registration form is a simple opt-in form for registration that looks like the following:

A registration embedded form can look something like this:

<div class="wj-embed-wrapper" data-webinar-hash="XXXXX">
<script src="https://event.webinarjamdev.com/register/XXXXX/embed-form?formButtonText=Register&formAccentColor=%2329b6f6&formAccentOpacity=0.95&formBgColor=%23ffffff&formBgOpacity=1"></script>
</div>

*Please Note: You will want to copy this from your account interface and not from this documentation.

Customizable parameters for embedded registration form:

• formButtonText: string, default “Register” (the text inside the button)

• formAccentColor: string, default #29b6f6 (the button, and the text ‘Convert to another timezone’ color)

• formAccentOpacity: float between 0 and 1, default 0.95 (the button, and the text ‘Convert to another timezone’ transparency level)

• formBgColor: string, default #ffffff (the form background color)

• formBgOpacity: float between 0 and 1, default 1 (the form background transparency level)

*Please Note:

• 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.

*Please Note: (To all above features)

• To ensure registration form stability, we recommend to only add one of the registration codes to any single page. In other words, do not add the code above to a single page more then once.