Bizzabo Standard Installation

 

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

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
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 Confirmation and 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 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.