This is the standard procedure for installing InGo to Bizzabo events. Please contact support@ingo.me with any questions or issues while installing InGo to your event.
Preparation
- Create your event site in Bizzabo
- Create your event campaign in InGo
- Collect the following data
Evergreen Data
- InGo Webhook Endpoint URL - https://partner-api.ingo.me/1.0/bizabooattendees
- Bizzabo API Key - YOUR BIZZABO API KEY
Event-Specific Data - Bizzabo
- Bizzabo Event ID
- URLs of each ticket selection page (linked from Register Now button(s)
- Events with multiple ticket types e.g. Premier Pass, Loyalty Pass, etc. may have multiple login widgets if the “Register Now” buttons lead to different pages.
Event-Specific Data - InGo
- InGo Login Widget ID
- InGo Social Widget ID
- URL of the form page
Widget Styling
- Widget CSS Styles - ask your web designer to complete the “Login Widget CSS Template” below, adding the colours for your event theme
1 - Prepare the Widget Scripts
Using a text editor and the template below, create a login widget script snippet for each login widget to be embedded.
This script replaces your existing “Register/Book Now” buttons with InGo Login Widgets.
Important:
- Replace the placeholder text (starting/ending with ##) with your event-specific data
- Install the first script snippet (“...src="https://cdn.ingo.me/widgets…”) only once per page
- Install one instance of the second script snippet for each “Register Now” button to be replaced
Login Widget Template
<!-- one per page -->
<script src="https://cdn.ingo.me/widgets/##-UNIQUE-LOGIN-WIDGET-ID-##.js" data-exec="false"></script>
<!-- one per login widget -->
<script>
setTimeout(function() {
InGo.ingoWidget({
"widgetId": "##-UNIQUE-LOGIN-WIDGET-ID-##",
"manual": "##-URL-OF-TICKET-SELECTION-PAGE-##",
"target": "a[href*='##-URL-OF-TICKET-SELECTION-PAGE-##']",
"showManualAsButton": true,
"texts": {
"en": {
"label.button.linkedin" : "Book Socially",
"label.button.facebook" : "Book Socially",
"label.button.twitter" : "Book Socially",
"label.button.register": "Book With Email",
"header-sub": "Book socially to connect with others, and share to your newsfeed."
}
}
});
}, 500);
</script>
Then, create the social widget script using the following template.
Social Widget Template
<iframe src="//ingo.me/widgets/iframe?widget_unique_id=##-UNIQUE-SOCIAL-WIDGET-ID-##" style="width: 100%; height: 550px;border: none;"></iframe>
Finally, give this script to your web designer to add your event branding to your InGo Login Widget.
Login Widget Style Template
<style>
/* Widget */
.ingo_login_widget {
background-color:rgba(0,0,0,0);
border:none;
padding: 0px;
width: 100%;
}
/* Header */
.ingo_login_widget .ingo_login_widget_header {
display:none;
}
/* Subheader */
.ingo_login_widget .ingo_login_widget_subheader {
display:block;
font-size: 13px;
}
/* Social button */
.ingo_login_widget [class*='ingo_login_widget_social_button_'] {
background-color:#CDFFFF;
color: white;
line-height: 50px;
}
/* Social button - hover */
.ingo_login_widget [class*='ingo_login_widget_social_button_']:hover {
background-color:#99FFFF;
}
/* Social button text */
.ingo_login_widget [class*='ingo_login_widget_social_button_'] .ingo_login_widget_social_button_text {
color: #0a102c;
margin-left: 35%;
}
/* Button icon */
.ingo_login_widget [class*='ingo_login_widget_social_button_'] .ingo_login_widget_social_button_icon {
background-color:#00cccc;
color: #fff;
height: 50px;
}
/* Button icon - hover */
.ingo_login_widget [class*='ingo_login_widget_social_button_']:hover .ingo_login_widget_social_button_icon {
background-color:#00cccc;
}
/* Manual reg link */
a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover .ingo_login_widget_hr {color:#66605c; }
.ingo_login_widget .ingo_login_widget_hr {background-color:#00cccc; }
.ingo_login_widget .ingo_login_widget_register_button
{
background-color:#eee;
color: #fff;
}
/* Manual reg button */
.ingo_login_widget .ingo_login_widget_register_button {
background:#eee;
color: #fff;
padding: 15px 10px;
}
/* Manual reg button - hover */
.ingo_login_widget .ingo_login_widget_register_button:hover {
background: #ccc;
}
/* widen the widget footprint */
.ft-price-button {
padding: 0;
}
</style>
2 - Create the Webhook
From your Bizzabo event dashboard, complete the following steps.
- Click “Basics” on the top navigation bar
- Click “Integrations” on the left navigation bar
- Click “settings” in the Webhooks box
- Click “Add New Webhook” button
- In the “Endpoint URL” box, paste the InGo Webhook Endpoint URL - https://partner-api.ingo.me/1.0/bizabooattendees
- In the “Select Actions” list, tick the “Order Created” box
- Click “Done”
3 - Embed the Login Widget(s) and Styles
From your Bizzabo event dashboard, complete the following steps.
- Click “Website & Mobile” in the top navigation bar
- Click the “Edit Website” button
- Click “Pages” in the left navigation bar
- Locate the name of the page where the widget(s) will be installed
- Click the cog icon in the upper left of the page cell
- Click the code icon “</>” to open the HTML Code Editor
- Click the <head> code tab
- Paste the code created using the Login Widget Template to the editor, and tick the box for “Enable page <head> code”
- Click the <footer> code tab
- Paste your login widget styles
4 - Embed the Social Widget
From your Bizzabo event dashboard, complete the following steps.
- Click “Registration” in the top navigation bar
- Click “Confirmation Message” from the left navigation
- In the message editor, click the code icon “</>” to open the HTML Code Editor
- Paste the code created using the Social Widget Template
- We strongly recommend placing the widget such that it is visible above the fold to increate engagement
- Click Save
5 - Test the Installation
Use our Quick Test Procedure to test your installation and troubleshoot any issues found.
Conclusion
Your Bizzabo event is now installed, tested, and ready to launch! Please contact support@ingo.me if you have any questions or issues with this procedure.