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.
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.
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 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:
I have also added the demographic questions to the registration:
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:
Which will display the registration page for this webinar:
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.
Here is the IE pop-up menu. Select the View Source.
Here is the Chrome pop-up menu. Select View page source.
Extracting the HTML Form
Within the HTML we need to locate and extract the form tag so search for:
Copy everything from the beginning <, through the ending > of:
Paste it into a text editor of some type. I am using Notepad++ in this example and it looks something like this:
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
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.
4. When the Connect to Service dialog is displayed, click Create a new Connection
5. Select HTML Form code, then click the Go to next step button.
6. Paste the Form HTML you have in your text editor into the text box that says Insert your code here
7. Click the Generate Fields button and you will see something resembling the following:
8. Set the properties of the various fields, as shown below:
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:
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.
Assuming all is correct, you should see a GoToWebinar confirmation page:
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.
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.