You've created your Registration Form(s) on Expo Pass. Now what?
Of course you want to showcase your Registration Form on your website, so Expo has given you two options to do so.
This article speaks to the Lightbox Version, which is what Expo recommends you use to provide your registrants with the most user-friendly option and it keeps them on your website. You can embed one or multiple registration forms onto your website.
What is light box you ask? Put simply, it's a popup overlay that displays your registration form and dims out the rest of your web page where the form was linked from.
The data from registrants who register through your link (from the java code placed on your website) will be captured in your Expo Pass Web Application under the "Transactions" and "Attendees" sections.
Here is an example image of the Lightbox Version.
How To Embed One Lightbox Registration Form: This is used when you have 1 registration form that needs to be embedded through a button on your website.
How To Embed Multiple Lightbox Registration Forms: This is used when you have multiple registration forms that need to be embedded through a button each on your website (Attendee Registration, Exhibitor Registration, Sponsor Registration etc).
How To Embed One Lightbox Registration Form
This is used when you have 1 registration form that needs to go on your website
1. Login to Expo Pass Classic with your credentials and choose the appropriate event.
Please note, you must create a Registration Form before starting this step. If you have not created your Registration Form, please follow the “Create a Registration Form” instructions in our Support Center.
2. Under the “Registration” tab in the left-hand menu, click on “Registration Code”.
Simply copy and paste the unique registration code from above vX3oLRX into the below javascript in-between the two quotation marks where it says REGFORM_EMBED_CODE.
You can also customize the button text by replacing CUSTOMIZABLE BUTTON TEXT with what you would like your button to say.
Javascript Code:
BEFORE REG CODE AND CUSTOM BUTTON TEXT ARE ENTERED
AFTER REG CODE AND CUSTOM BUTTON TEXT ARE ENTERED
Next, copy the entire javascript and paste onto your website. (please note, depending on the web provider you are using, you may need to work directly with them to execute this step).
The most important detail of the button div element is that it maintains the class name of “expo-tickets”. If that class is not present on the element then the button will not work.
This is the actual text that you can copy and paste into your website.
<script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)){ return; } js = d.createElement(s); js.id = id; js.onload = function(){ showForm("IframeDivId", "REGFORM_EMBED_CODE"); }; js.src = "https://go.regform.com/_assets/scripts/expo.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'expo_js')); </script> <style> .expo-tickets { font-size: 18px; width: 300px; height: 50px; text-align: center; line-height: 50px; margin: 0px auto; border: 0px solid; border-radius: 25px; background: #7808e0; float:left; color: white; font-weight: bold; cursor: pointer; } </style> <div class="expo-tickets">CUSTOMIZABLE BUTTON TEXT</div>
Special notes:
The most important detail of the button div element is that it maintains the class name of “expo-tickets”. If that class is not present on the element then the button will not work.
The script element can be added anywhere on the page.
The style element can be added anywhere on the page. This style makes the button div look like an “expo” button. You are free to adjust the style as you see fit.
The “div” element can be dropped anywhere on the webpage to add a button element.
How To Embed Multiple Lightbox Registration Forms for Different Events in Expo Pass
This is used when you have multiple registration forms that need to be embedded through a button each on your website (Attendee Registration, Exhibitor Registration, Sponsor Registration etc).
1. Login to Expo Pass Classic with your credentials and choose the appropriate even
Please note, you must create a Registration Form before starting this step. If you have not created your Registration Form, please follow the “Create a Registration Form” instructions in our Support Center.
2. Under the “Registration” tab in the left-hand menu, click on “Registration Code”.
Simply copy and paste the unique registration code from above vX3oLRX into the below javascript in-between the two quotation marks where it says REGFORM_EMBED_CODE.
Repeat this for each button you create with the different unique code for each event.
You can also customize the button text by replacing CUSTOMIZABLE BUTTON TEXT with what you would like your button to say.
Javascript Code:
BEFORE REG CODE AND CUSTOM BUTTON TEXT ARE ENTERED
AFTER REG CODE AND CUSTOM BUTTON TEXT ARE ENTERED
This is the actual text that you can copy and paste into your website.
<script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)){ return; } js = d.createElement(s); js.id = id; js.onload = function(){ showForm("IframeDivId", "REGFORM_EMBED_CODE"); }; js.src = "https://go.regform.com/_assets/scripts/expo.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'expo_js')); </script> <style> .expo-tickets { font-size: 18px; width: 300px; height: 50px; text-align: center; line-height: 50px; margin: 0px auto; border: 0px solid; border-radius: 25px; background: #7808e0; float:center; color: white; font-weight: bold; cursor: pointer; } </style> <div class="expo-tickets" data-expo-regform-code="REGFORM_EMBED_CODE">CUSTOMIZABLE BUTTON TEXT</div>
Special Notes:
The most important element here is the addition of the “data-expo-regform-code” attribute on the button div element. This element is what links a specific event to the specific button.
Every “expo-tickets” button div MUST provide a “data-expo-regform-code” attribute!
The button div element must maintain the class name of “expo-tickets”. If that class is not present on the element then the button will not work.
Note that the REGFORM_EMBED_CODE in the script element will not impact the reg form that is opened when using this embed type.
The script element can be added anywhere on the page.
The style element can be added anywhere on the page. This style makes the button div look like an “expo” button. The client is free to adjust the style as they see fit.
Multiple instances of the “div” element can be dropped anywhere on their page to add a button element.
Multiple buttons can have the same regform code provided on “data-expo-regform-code”.
Is this form secure? YES! The registration form itself is secure, but we don’t have any control over the page its hosted on (aka your website). So while the form is secure, if the website is not, it will show "not-secure" in the browser. To offer a full peace-of-mind, you will need to ensure that your website has an SSL certificate.
If you don't have a secure website, you can host your registration form on your Facebook page! Click HERE for step by step instructions.
