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.
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 Confirmation 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
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”
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
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 snippets from below:
<iframe src="//app.ingo.me/widgets/iframe?widget_unique_id=your_confirmation_widget_id"></iframe>
<iframe src="//app.ingo.me/widgets/iframe?widget_unique_id=your_social_widget_id" style="width: 100%; height: 550px;border: none;"></iframe> - Make sure you have pasted your proper Authorizer and Amplifier widget IDs into the snippet.
- We strongly recommend placing the Social Widget such that it is visible above the fold to increase engagement
- Click Save
Please contact support@ingo.me if you have any questions or issues with this procedure.