Here is the guide to implement the JS and enable on-site notifications on your website.

✅ Authentication

In order to make it work, you need to have an endpoint at your side which purpose is to validate the user session id (sid). This sid will be provided when initialising the integration.

Read more here about the auth endpoint/sid validation.

📨 On-site Notifications

Make sure you have authenticated / initialised the integration. You can read more about that here.

📮 Site Inbox Solution

(Added in version 1.1)

Fast Track CRM provides on-site notifications. The Site Inbox solution will further enhance this integration with the possibility to have an inbox on-site where players can receive and read historical messages similar to an email browser.

If you want to enable the Fast Track CRM Inbox, here is how it can be implemented.

Parameters

FT CRM will require a two mandatory properties to be set for the inbox to run.

These are:

SID

The sid (session id) or (auth token) is declared as window.sid and needs to be set before initialising the inbox. The SID needs to be exchangeable for a User ID on your backend. You can read more about the authentication endpoint needed in your Operator API here.

Brand Name

The brand name will be given to you from your Integrations Manager and is usually a lower case representation of the brands name. It is declared as window.fasttrackbrand and is required to be set before initialising the javascript library.

FT CRM also has a set of options to set with corresponding default values, here is a list of all available settings to set in the window.fasttrack object:

Here are all parameters that the FT CRM Integration/Inbox accepts.

Name Options / Type Description Default value Required

Name

Options / Type

Description

Default value

Required

integrationVersion

1.0 / 1.1

Sets the version of the integration script. Use version 1.1!

1.0

Yes

autoInit

Boolean

When set to false, script will not be initialised automatically. It has to be manually initialised by running window.FasttrackCrm.init();.

false

No

enableEventTracking

Boolean

Makes Fasttrack CRM tracking functions available.

true in 1.0. false in 1.1

No

enablePendingRewards

Boolean

Makes Fasttrack CRM pending rewards functions available.

true in 1.0. false in 1.1

No

enableCrmIntegration

Boolean

Makes Fasttrack CRM functions available.

true in 1.0. false in 1.1

No

inbox.enable

Boolean

Enables inbox functionality. Only available from version 1.1 and up.

false

No

inbox.badgeId

String

ID of HTML element in your DOM. Will receive text containing amount of unread messages. Element will be hidden if the unread count is zero.

null

No

inbox.navBarLogo

String

URL to image (logo) that should be displayed in top left corner of inbox.

https://www.example.com/logo.png

No

inbox.contactEmail

String

Email address for and support purposes.

info@example.com

No

inbox.termsAboveButtons

Boolean

Puts the terms and conditions above the CTA buttons on shoutout and inbox messages.

false

No

inbox.closeModalOnFogClick

Boolean

If enabled, you will be able to close the inbox modal when clicking outside the modal on the overlay / fog.

false

No

pendingBonusesV2.enable

Boolean

Enables the pending bonuses functionality of the FT CRM integration.

false

pendingBonusesV2.badgeId

String

ID of HTML element in your DOM. Will receive text containing amount of unused pending bonuses. Element will be hidden if the unread count is zero.

null

pendingBonusesV2.showTermsHeader

Boolean

Shows a header for the terms and conditions section.

false

pendingBonusesV2.closeModalOnFogClick

Bool

If enabled, you will be able to close the pending bonuses modal when clicking outside the modal on the overlay / fog.

false

pendingBonusesV2.depositPageUrl

String

The relative page link to your deposit page.

/deposit

locale

String

The front end locale to use for translations of auto generated time formattings.

Defaults to browser / user agent locale. If not found, defaults to enGB.

FT CRM javascript integration has all the strings translatable. The translations should be declared at window.fasttrack.translations, and in the below list you find all available translations to be put inside the translations object.

Name Default value

recieved

Recieved:

validUntil

Valid until:

questionsTop

Questions? Mail us at

questionsShort

Questions:

deleteMessagePrompt

Are you sure you want to delete this message?

inboxEmpty

There is currently no messages in your inbox

readMore

Read more

backToList

Back

inboxHeader

Inbox

pendingBonusesEmpty

You currently have no pending bonuses

pendingBonusesTitle

Pending Bonuses

pendingBonusesSubTitle

Grab these cool bonuses!

pendingBonusesExpiresIn

Expires in

pendingBonusesExpires

Expires

pendingBonusesCTAUnlockText

Deposit!

pendingBonusesCTAClaimFallbackText

Claim

pendingBonusesBackButtonText

Back

pendingBonusesTermsAndConditionsHeader

Terms & Conditions

pendingBonusesBonusUnlockedText

Awesome! You can now claim this offer below

days

d

hours

h

minutes

min

Functions / Methods

The FT CRM library has an amount of available functions to use in different situations, below you find a list of them.

Function Description

window.FasttrackCrm.toggleInbox()

Toggles the Inbox modal to be shown or hidden. Inbox functionality must be enabled for this to work.

window.FasttrackCrm.togglePendingBonusesV2

Toggles the Pending Bonuses model to be shown or hidden. Pending Bonuses must be enabled for this to work.

window.FasttrackCrm.init

If the flag autoInit is set to false, you can manually or by code initialise the javascript library using this method. Also, a good usage of this method if your SID would expire and you want to re-authenticate, then you can do the following:

window.sid = 'new-sid-here'; and then you run this method.

window.FasttrackCrm.logout

This method logs the front end user out from the javascript library. If you have the possibility, it is good practice to log the user out from the javascript library if the user logs out from your site.

👍Examples & debugging

Below is a full example of how the inbox integration script should look like in production on your site.

Staging Url for script:

Inbox button & badge

You can have a menu button (or similar) that toggles the inbox. It could have an associated badge that displays the number of unread inbox messages.

Here's how the markup and CSS would look like.

Visit this page to see a live demo of the Inbox functionality.

✍️ Using Google Tag Manager for inserting FT CRM Scripts

If you want to use your Google Tag Manager for injecting the Site Integration Script / Inbox Script on your site you can do that.

1. Create a new user-defined variable in GTM

Google Tag Manager Custom Variable

Google Tag Manager Custom Variable

2. Create a new trigger

Create a "Page View - DOM Ready" trigger. Add additional filters such as URL if you want. But it is important that the trigger is based on page vid AND DOM Ready.

3. Create a new tag with following code inside

Don't forget to replace your own values.

Make the tag fire on your "Page View - DOM Ready" trigger.

3. Insert the script in your HTML / DOM

You might already be adding dataLayer variables. If you do so, please append the dataLayer with your sid variable (the custom variable you created in step 1) and add the corresponding value.

If you are not already adding dataLayer variables to GTM you need to include the following before initiating the Google Tag Manager on your page:

And you're done! 👌

Debugging

Test user

If you want to debug in staging or production environment, you could deploy the above script to production with the variable autoInit set to false. With that done, you can manually enable the inbox integration by putting this into the browser developer console:

After doing that the inbox integration will initiate with the sid variable defined. You can change the sid in runtime by setting the sid in the developer console before initiating it, like this:

Sending a demo message

You can send a demo message from the developer console (script has to be initialized first!):

If you want to you can also set the data in the message yourself, like this:

📥 Front end inbox actions

If you want to toggle the visibility of the inbox in the front end of your site, you can add this action on your inbox button in the main menu for example:

🖍Override Styles

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

Dynamic CSS Classes

If you want, you can also style the notifications different based on wether it is a inbox notification or On-Site notification. 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:

Further, you can add a dynamic class from FT CRM. Let's say you want to distinguish between two different inbox notifications on the front end, you could then use the Dynamic CSS field in FT CRM on the Inbox / On-Site notification action. If they are not enabled, ask your FT CRM Integrations Manager to enable them for you. Here are some examples of how to target the CSS: