Skip to main content

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.

Preparation

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 

mceclip1.png

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="//ingo.me/widgets/iframe?widget_unique_id=your_confirmation_widget_id"></iframe>

    <iframe src="//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.
      mceclip0.png
    • We strongly recommend placing the Social Widget such that it is visible above the fold to increase 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.



Related articles