Skip to main content

Mapping the Authorizer Widget for your Custom Website

While using InGo on your custom website, it's very possible you will run into issues with mapping the Authorizer Widget. The Authorizer has parameters that look like this: data-ingo-attendee.first-name="YOUR_SYSTEM_FIRST_NAME_PARAM". This is supposed to be taking advantage of merge fields/personalization tokens, such as when you can personalize the name on an email in your email marketing system. Assuming your website does not know who the registrant coming through your system is, you will have to leverage another method to install the InGo widgets on your confirmation page.

Setting up your listeners for form changes

The first step is to set up a JavaScript listener for your form. Our goal here is to log all of the fields from your form into an easily accessible, temporary storage. There's a couple parts to doing this:

  1. Ensure you have jQuery installed on your site
  2. Finding the unique attribute for each of your form fields
  3. Constructing your JavaScript function

Ensure you have jQuery installed on your site

To check for jQuery on your website, open the developer console. You can do this on most browsers by right clicking on the page, clicking Inspect (or Inspect Element), and then clicking over to the Console tab when the new panel opens on the side or bottom of your screen. Once you've gotten to the console, click where the > symbol is, and type jQuery.

Screen_Shot_2020-10-23_at_4.25.54_PM.png

There are two possible outcomes. If you get a red error that says "jQuery is not defined", that means jQuery is not installed on your site. See the screenshot below:

Screen_Shot_2020-10-23_at_4.26.08_PM.png

To add it, paste this snippet of code into the <head> section of your website globally, if possible.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

If jQuery is installed, it will likely pre-suggest jQuery as a command, and you will see the following:

Screen_Shot_2020-10-23_at_4.26.20_PM.png

Finding the unique attribute for each of your form fields

Start by inspecting the First Name field on your registration form. Every form is different, so there's not a one size fits all answer to what you're going to copy from the code. Ideally, each field has an ID property, and that ID is fairly obvious (ex: id="first-name"). If not, you'll want to look at the list of classes and see if anything is obviously unique. If there's no unique class or id for each field, you will want to find any unique property. Once you have found your unique attribute, you'll want to make note of the CSS selector for that element. You can also use this selector to map your Autofiller Widget on the same page.

Constructing your JavaScript function

To construct your JavaScript function, you'll want to set up a way to log every change to the form. Here's a template:

jQuery("input").change(function(e){
sessionStorage.setItem(e.target.id,e.target.value);
});

In this case, I am logging every change to an input element on the page. It is being logged into the browser's sessionStorage, which is erased every time you end a session. It's being logged where the lookup key is the id of the field, and the value is the value of the input at the time of the change. If your unique identifier is the name attribute, you'll want to change e.target.id to e.target.name, as an example.

Testing your Listener

Now that you've set up your listener, make sure it works! To test, make some changes to your form, then in the developer console, type sessionStorage and hit 'enter'. You should see some sort of response you can click through. Do you see your unique attributes paired with the values in your form? If so, you're good!

Setting up the Authorizer and Amplifier

On your confirmation page, you will need to use a raw JS version of the InGo code to install the Authorizer and Amplifier widgets. We will use the raw JS installation so that we can access the sessionStorage values for the Authorizer. The snippet below is configured to be added to the page wherever you want InGo to appear.

 

Here's a template:

<div id="ingo"></div>
<script src="https://cdn.ingo.me/widgets-loader/latest/js/ingo.loader.widget.js"></script>
<script>
 InGo.ingoWidget({
 "widgetId": "YOUR_AMPLIFIER_WIDGET_ID",
 "target": "#ingo",
 "ui": {
   "width": "100%"
  }
 });
 InGo.ingoWidget({
 "widgetId": "YOUR_AUTHORIZER_WIDGET_ID",
 "attendee": {
 "firstName": sessionStorage.getItem("YOUR_FIRSTNAME_SESSIONSTORAGE_KEY"),
 "lastName": sessionStorage.getItem("YOUR_LASTNAME_SESSIONSTORAGE_KEY"),
 "email": sessionStorage.getItem("YOUR_EMAIL_SESSIONSTORAGE_KEY"),
 "company": sessionStorage.getItem("YOUR_COMPANY_SESSIONSTORAGE_KEY"),
 "title": sessionStorage.getItem("YOUR_JOBTITLE_SESSIONSTORAGE_KEY")
 }
 });
</script>

Testing the Authorizer

When you test registration, open the developer console one more time. type InGo, and hit 'enter', then follow these steps.

  1. Click the first line to expand the response
  2. Click Widgets
  3. Click _registry
  4. Click the ID of your Authorizer
  5. Click _options
  6. You should see an "attendee" object. If so, click that
  7. You should see the values that match your sessionStorage.

And that's it! If you see your proper values, your Authorizer is configured properly and all registrants will be reported properly in your InGo dashboard.

Related articles