Front End Implementation
Follow below steps to start implementing the Front End Library
In below script there is three things you need to replace:
- 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.
- 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.
- 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.
Mandatory: The main div that will hold the HTML / Markdown for the On Site Notifications and Rich Inbox is this element:
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.
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 ⬇️
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:
- Enable the feature Rich Inbox in the main configuration object (look at above code example)
- 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.
When clicking the button, the function window.FasttrackCrm.toggleInbox() is called. This function will open the Rich Inbox if it is closed.
If you have come this far you have implemented both the On Site Notifications and the Rich Inbox.
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.
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: