TutorialsIntegrationKnowledge Base

Front End Implementation

This page will cover how to install the Front End Javascript as a bare minimum on your Front End site.

Follow below steps to start implementing the Front End Library

Step 1: Adding the Javascript

This is the Javascript you need to add as high up as possible on your page, ideally in the header.

In below script there is three things you need to replace:

  1. Replace the window.fasttrackbrand with the brand name you were given from your Integration Manager. This is going to be a hard coded value that is going to be the same for your brand both for staging and production.

  2. Replace thewindow.sid variable dynamically with the current logged in users sid. This sid (session id) is going to be the payload on the Operator API Authenticate Endpoint.

  3. At the bottom of below script there is a property called fastTrackCrmScript.src. This one has two different values that you are supposed to use; one for staging and one for production. Make sure you use the correct one depending on your current environment.

The only difference between using On Site Notifications and On Site Notifications + Rich Inbox is the main configuration object.

<script>
    window.fasttrackbrand = "brand_name"; // REPLACE THIS!
    window.sid = "abc123"; // REPLACE THIS!
    window.source = "origin" // REPLACE THIS With brand name / origin key

    // This is the main configuration object
    window.fasttrack = {
      integrationVersion: 1.1,
      autoInit: true,
      inbox: {
        enable: true,
        badgeId: "#ft-crm-inbox-badge",
        navBarLogo: "https://via.placeholder.com/200x200",
        contactEmail: "support@example.com",
        supportLinkText: 'customer support »'
      }
    };

    var fastTrackCrmScript = document.createElement('script');
    fastTrackCrmScript.async = true;
    fastTrackCrmScript.onload = function () {
      new window.FastTrackLoader();
    }

    // This loader URL is for staging:
    fastTrackCrmScript.src = `https://lib-staging.rewards.tech/loader/fasttrack-crm.js?d=${new Date().setHours(0, 0, 0, 0)}`;

    // This loader URL is for production:
    // fastTrackCrmScript.src = `https://lib.rewards.tech/loader/fasttrack-crm.js?d=${new Date().setHours(0, 0, 0, 0)}`;

    document.addEventListener('DOMContentLoaded', function() {
      document.body.appendChild(fastTrackCrmScript);
    });
  </script>

Step 2: Adding the HTML

Mandatory: The main div that will hold the HTML / Markdown for the On Site Notifications and Rich Inbox is this element:

<div id="fasttrack-crm"></div>

Place this element as high up as possible in your HTML document, ideally directly after you open the <body> tag. Regardless if you only use On Site Notifications and / or the Rich Inbox; you need this div.

✅ Done with On Site Notifications!

You have now implemented the bare minimum for using the On Site Notifications on your front end. Please proceed if you want to implement support for the Rich Inbox as well ⬇️

Implementing support for Rich Inbox

As you might have seen the above code example have two tabs; one showing an example of only enabling the On Site Notifications, and one example enabling BOTH On Site Notifications AND Rich Inbox. They are both in the same library but for enabling the Rich Inbox you need to take a few additional steps:

  1. Enable the feature Rich Inbox in the main configuration object (look at above code example)

  2. Add a two more HTML elements to your Front End code. The div you added to your page with id fasttrack-crm has capability of showing the inbox itself, but in most cases you'll want some kind of indicator on your page indicating how many unread messages the user have in their inbox. Probably you also want a button which will open / close the inbox.

Here we see an example of a button which has a child span element holding the count of unread messages. The Javascript library will hide the span element for the unread count if the unread count is zero.

<button onclick="window.FasttrackCrm.toggleInbox();">
  Inbox <span id="ft-crm-inbox-badge">0</span>
</button>

When clicking the button, the function window.FasttrackCrm.toggleInbox() is called. This function will open the Rich Inbox if it is closed.

✅ Done with Rich Inbox

If you have come this far you have implemented both the On Site Notifications and the Rich Inbox.

Step 3: Apply your own Design

If you want to override the styles in the inbox, all styles should be wrapped within the CSS id #fasttrack-crm. That protects your sites CSS and allows you to easily target CSS classes in the inbox. Place a block of CSS above the invocation of the integration script.

Example

<style type="text/css">
#fasttrack-crm .cta-button {
  background-color:red;
  color:black;
}

#fasttrack-crm .cta-button.secondary {
  background-color:lime;
  color:white;
}
</style>

If you want, you can style the notifications different based on wether it is an On Site Notification or a Rich Inbox Message. You can also style the entire inbox message / shoutout view or style the list of inbox messages depending on if they are read or unread. Here are some CSS examples:

/* Inbox Notification: */
#fasttrack-crm .notification-small.ft-notification-type-inbox {
  background-color: red;
}

/* On Site Notification: */
#fasttrack-crm .notification-small.ft-notification-type-message {
  background-color: lime;
}

/* Shoutout notification: */
#fasttrack-crm .selected-message.ft-notification-type-shoutout {
  background-color: brown;
}

/* Inbox List item read / unread */
#fasttrack-crm li.message.is_read {
  opacity:.5;
}

#fasttrack-crm li.message.is_unread {
  background-color: red;
}

/* Opened up inbox message: */
#fasttrack-crm .selected-message.ft-notification-type-inbox {
  background-color: blue;
}

Please continue your reading to the next page in order to verify the Integration and then later perform a Test Send.

PreviousSetting up your Pusher AccountNextTest Send

Last updated

Was this helpful?