Enhancing the GoToWebinar Connection from Thrive Themes

I am in the process of moving all of my websites over to Thrive Themes (which I really love, by the way).

A Bit of Background

As you have probably noticed, I host a lot of webinars so having good integration between my web site and GoToWebinar was essential.  Luckily, Thrive Themes ships with a connector for GoToWebinar which allows you to use a Thrive Theme component to collect webinar registration information which will be passed to GoToWebinar to register an individual for a webinar, without them having to visit a GoToWebinar registration page.

This is great on several levels, the most important of which is the fact that a visitor does not need to leave your site.

You can learn more about how to connect Thrive Themes and GoToWebinar here.

Drawback

The problem is that the Thrive Theme connector only asks for the information required by GoToWebinar, which is currently just the person’s name and email address.

webinar1

While this is fine for most cases, I typically request more demographic data such as their location.

Unfortunately, the API is not configurable so you are kind of stuck with just those fields.

Note: The name is assumed to be the person’s full name. GoToWebinar will parse the name into what it feels are first name and last name when the person is registered.

The Solution

The solution is to use an HTML Form connector instead of the API. This requires a bit of work up front, but after you have it working, it is fairly easy to maintain and modify.

Let’s walk through the process.

Step 1: Create Your Webinar

So create your webinar like you normally do. Here is a test webinar that I created:

webinar2

I have also added the demographic questions to the registration:

webinar3

Since I work with people all over the planet, this keeps me informed of where my people are located.  It also helps to cut down on webinar SPAM – and yes, there is such a thing.

Step 2: Capture the Registration Form HTML

In order to use the HTML connector with Thrive Themes, we have to extract the Form HTML from the registration page.  Click on the registration link found within the webinar management page:

webinar4

Which will display the registration page for this webinar:

webinar5

Viewing the Page Source Code

We need to view the raw HTML that makes up the page so right-click anywhere on the page to display the pop-up menu.

Internet Explorer

Here is the IE pop-up menu. Select the View Source.

webinar6

 

Chrome

Here is the Chrome pop-up menu. Select View page source.

webinar7

Extracting the HTML Form

Within the HTML we need to locate and extract the form tag so search for:

<form>

Copy everything from the beginning <, through the ending > of:

</form>

Paste it into a text editor of some type.  I am using Notepad++ in this example and it looks something like this:

webinar8

Editing the Form HTML

We have to make a few small edits to the HTML code.

First, we need to make the URL that the form posts to a fully-qualified path.  Find this line:

<form id="registrationForm" action="/registration.tmpl" method="POST" role="form">

and make it look like this:

<form id="registrationForm" action="https://attendee.gotowebinar.com/registration.tmpl" method="POST" role="form">

All I did was to copy the beginning of the URL from the registration page and added it to beginning of the action path.

Finding the Webinar ID

The most important piece of information in this file is the webinar ID, which looks like this:

<input type="hidden" id="webinar" name="webinar" value="12345678901234567890" />

This value is unique to the webinar and must be edited each time you create a new webinar. If you always ask for the same set of information, you may save this segment of Form HTML and use it again and again, only changing the value property of the webinar field to reflect the new webinar ID.

Step 3: Modifying the Thrive Lightbox

Now that we have our HTML code, we need to modify the lightbox and connect it to GoToWebinar using an HTML form connection. Follow these steps:

1. Open the Thrive Lightbox in the editor

webinar1

2. Click on the button (Reserve My Seat, in this case) to display the Lead Generation options.

3. Click on the Connect to Service button.

webinar9

4. When the Connect to Service dialog is displayed, click Create a new Connection

webinar10

5. Select HTML Form code, then click the Go to next step button.

webinar11

6. Paste the Form HTML you have in your text editor into the text box that says Insert your code here

webinar12

7. Click the Generate Fields button and you will see something resembling the following:

webinar13

8. Set the properties of the various fields, as shown below:

14

9. Click the Save button to save your work and you will be returned to the Thrive Themes editor.

The end product should look something like this:

webinar15

Note: You may need to modify the light box to handle the new fields, depending on the layout of the control.

10. Save your changes.

Step 4: Testing

To test your modifications, click on the Preview button and it should preview your lightbox.

Enter the information into the fields below, then click the Reserve My Seat button.

webinar18

Assuming all is correct, you should see a GoToWebinar confirmation page:

webinar16

 

Next Steps

As I mentioned, you can reuse this code as long as you don’t change the fields. The most important item is to always replace the Webinar ID number we discussed earlier.

When you make any modifications to the HTML, you must always click the Generate Fields button to make sure it will be using the latest HTML code. Failure to do so will result in your changes being ignored. In most cases, the Generate Fields operation does not cause you to loose your previous configuration if you have not changed the fields.

 

Summary

This technique has totally changed the way I conduct webinar registrations and I hope you find it valuable as well.

Please let me know if my instructions were not clear and I will edit as necessary.

Thanks, Mitch