Everwebinar is awesome at letting you create evergreen or just-in-time webinars, you know the type... where you optin and the webinar is ready to start in the next fifteen minutes...

These are a powerful starting point for any webinar driven sales funnel, however the Everwebinar landing pages leave a little to be desired.

Fortunately, Wishloop landing pages don't suck, but when we tried to set up our Wishloop page with the Everwebinar script we couldn't quite get the result we wanted and were initially stuck with 2 options:

1. We could either use the HTML options to embed the everwebinar script, but this meant we were left with their ugly registration button

2. We could integrate via the API but that meant our users couldn't choose when they wanted to watch the webinar via the default Everwebinar popup script.

Neither of these were ideal and what we really wanted was a setup where we could use the default Everwebinar popup script like this:

How the standard Everwebinar popup looks - including options to set timezone or choose which webinar to attend (if multiple times are setup in the EW settings)

But we wanted to use the default page styling options provided by Wishloop.

Fortunately we found a sweet little workaround for this

How we did it:

There are actually 2 problems that we faced.

This post addresses both issues and provides the perfect solution for a seamless Wishloop-Everwebinar integration.

1. Adding the Everwebinar embed code

The first issue is that the everwebinar embed code loads jQuery which we already load within the Wishloop builder. Loading the jQuery script twice causes some problems, so the first thing you'll need to do is edit the Everwebinar html embed code.

Here's how it looks initially:

What we actually need to do is strip out the section that loads jquery from Cloudflare. I've bolded this below:

When adding your Everwebinar script into your Wishloop campaign, you'll want to add the code directly into a HTML widget and exclude the bolded section of code.

NB: We recommend removing the bolded section of code before pasting it into the Wishloop builder to avoid unexpected behaviour

The problem with this method is that we end up with a button that we can't style natively in Wishloop. Not so cool, right?

So if we wanted to change the colour/size/text etc then we'd have to do that via inline styles in the form code.

What we really wanted was to use a native Wishloop button to trigger the Everwebinar popup.

2. Using the Wishloop button

So the first thing we want to do is hide the default Everwebinar button.

That's easy enough, we used the CSS class hardHide as shown below:

NB: If you want to see it again then you can switch to preview and then back to edit, and the button will be visible again in the builder (useful for positioning it somewhere out of the way)

Next up, simply drag a standard Button widget on to the Wishloop editor which can be styled however you want.

We've added an orange one in the image below with a small animation delay, but you can set whatever you want here.

There is no need to set a target url for the button as, for the final step, we'll trigger the Everwebinar popup using a snippet of javascript.

3. Add the script to trigger the popup when the button is pressed

Almost done. The only remaining thing is to add a small code snippet into the footer of the page.

To do so, click any area of the background of the page, then click the settings tab in the right panel and paste this code in to the footer:

<script>
var wj_pop_id = 'regpopbox_14475_58c250e5ab';
$(document).ready(function() {
$('.basic_button').click(function(){
$('[title='+wj_pop_id+']').click();
});
});
</script>

Here's where to add it:

The bit in bold above will need to be replaced with the correct popup ID for you webinar. You'll find this in your Everwebinar embed code.

As a reminder, here's what the Everwebinar embed code looks like again, and I've bolded the part you'll need to copy from your embed code into the footer script above.

And that's it!

When you view your page, the Wishloop button should trigger the Everwebinar popup, allowing your users to select their preferred timeslot or view the time of your just-in-time webinar in their own timezone.

After opting in, your viewers will be directed to whatever page you have setup in the Everwebinar settings.

Everwebinar integration with native Wishloop buttons