Using Gleanin with Eventbrite

This article takes you through how to use Gleanin with your Eventbrite registration.

To add Gleanin to your Eventbrite registration you’ll first need to set up an “Attendee” campaign in Gleanin - one which is designed for people who go through a registration process. You’ll also need an event set up on Eventbrite. This guide will cover:

• Adding Gleanin to an Eventbrite Form Registration
  • Redirecting to Gleanin When an Eventbrite Form is Completed
• Adding Gleanin to an Eventbrite Embedded Checkout

  • Understanding the Eventbrite Embed Code

  • Redirecting When an Embedded Checkout is Completed
  • Triggering the Gleanin Pop-up When an Eventbrite Embedded Checkout is Completed

Your Eventbrite registration can be hosted in two different ways: as a form on eventbrite.com or as an embedded checkout on one of your webpages. These two approaches support different methods of using Gleanin. 

Adding Gleanin to an Eventbrite Form Registration

If you're using an Eventbrite form (not their embedded checkout), you can add Gleanin to the end of your registration flow by automatically redirecting people to a different page when they complete registration.

Redirecting to Gleanin When an Eventbrite Form is Completed

To show Gleanin to registrants once they complete registration we are going to add a redirect link in Eventbrite. The redirect can go to one of two places:

• Directly to the Gleanin share tool.
• To one of your landing pages that has the Gleanin pop-up or embed added in the normal way.

To see what the user experience is like you can register for our pretend event on this form. When you complete registration you will be redirected to a separate “thank you” webpage with the Gleanin pop-up added in the normal way.

The steps for adding the redirect URL to your eventbrite registration are:

1. Have your URL ready - either a “Sendable link” to an attendee campaign (select your campaign, then “How to run my campaign”), or a link to a webpage you have added Gleanin to.
2. Login to your Eventbrite account
3. Select “Manage my events”
4. Select your event.
5. Select “Order options” > “Order confirmation”.
6. Under “Customise Webpage” find the “Message For Order Confirmation Page (No Html Tags Allowed)”
7. Enter only the URL in this box
8. Scroll to the bottom and “Save Settings”

Once you’ve done that, we’d recommend you register for your event and test that you’re happy with the flow.

Adding Gleanin to an Eventbrite Embedded Checkout

If you're using Eventbrite’s embedded checkout on your website and want to display Gleanin when registration is completed you can either redirect to a different page or trigger the Gleanin pop-up. To achieve both of these we will be using the callback function supported by Eventbrite.

We'll cover both methods of using Gleanin with your Eventbrite Embedded Checkout, but it's important to understand the Eventbrite embed code in a little more detail before you get started.

Understanding the Eventbrite Embed Code

Both redirect and triggering the Gleanin pop-up utilize a feature supported by Hubspot’s embed code called a “callback function”; A callback function is a bit of code you supply, which Hubspot will run when a registration is completed. The code Hubspot provides to add their Embedded Checkout already includes a placeholder for this function. In the image below, the callback function is in the red box, and the name of the function is underlined in two places: where it is defined and where it is used. The placeholder callback function logs a message saying “Order complete”.

The Eventbrite code to embed their checkout code .

Redirecting When an Eventbrite Embedded Checkout is Completed

Once you have the embedded checkout working you can add the redirect. The code example below shows the change that you need to make to the example callback function you got from Hubspot. The code below will take the user to example.com; you must change the URL. The URL can either point to a “thank you” page with Gleanin added as normal or it can point directly to the Gleanin “Sendable link” for an attendee campaign. The “500” in the code below is the number of milliseconds to wait before redirecting the user. If you want to redirect immediately on completion, set it to zero.

var exampleCallback = function() {
  console.log('Order complete!');
  setTimeout(function () {
    window.location.assign("https://example.com");
  }, 500);
};

Once you have completed the edit above register for your event using the embedded checkout and confirm the redirect is working as you want.

Triggering the Gleanin Pop-up When an Eventbrite Embedded Checkout is Completed

First get the Eventbrite embedded checkout working without adding Gleanin. Once that is working, follow the steps below to add the Gleanin pop-up.

The code required to trigger the Gleanin pop-up is more complex than for the redirect - we are going to add a custom callback function to your Eventbrite embed code and use that to insert the Gleanin pop-up on your page.

1. Get your Conversion & pop-up code from Gleanin
   • In the Gleanin admin screens  for your event, go to “Conversion & pop-up”
   • Select your options, ensuring that:
     • Gleanin is displayed as “pop-up”
     • “Advanced reporting” is set to “No”
   • Under “Custom code options” choose “Eventbrite (embedded checkout only)”
   • Copy the code
2. Add the “Conversion & pop-up” code to your Eventbrite integration code.
   • Add the code from the previous step to your Eventbrite embed code. It should go immediately before the line beginning “var exampleCallback = …”
   • The “Final code” picture at the end of this section highlights the changes to the Evenbrite embed code we made - this may be a useful reference to see where the code should be added.
3. Use the function we just added as the callback
   • Find the third-to-last line in your Eventbrite Embed code (beginning “​​onOrderComplete: exampleCallback  // Method …”
   • Replace “exampleCallback” with “insertGleaninFiles”
   • This change is also highlighted in the “Final code” picture below.

Final code, with changes highlighted in red

Once you have completed the edit above register for your event using the embedded checkout again and confirm it is working as you want.

If you have any feedback on this guide or are are having problems, please get in touch by emailing hello@gleanin.com - if you can include a description of any problems you’re seeing and a link to the page with your embedded checkout that will help us investigate any issues.