Installation
On-site messaging will function by adding the JavaScript Library code snippet to all pages of the website along with the placements in specific places where you want messaging to appear. Although the exact way you edit your website may differ depending on your e-commerce solution, the steps described below are valid for all websites.
Prerequisites
Before you get started, make sure you have everything you need:
- You will need access and editing privileges to source code of your website. This is a good point in time to involve a developer in the process.
- You will also need to know where on your site you would like the messaging to appear.
Adding the JavaScript Library
What is the JavaScript Library?
The JavaScript Library is the core part On-Site Messaging integration. It’s used to communicate between your website and On-site messaging. The JavaScript Library will render the content in the placements tags and not adding it to your site will mean placements are not loaded. You can read more about the library in the JavaScript Library section of the documentation.
1. Locate the Installation section of On-site messaging
The JavaScript Library snippet is generated for you and can be obtained in the installation page in the On-site messaging panel in the Merchant Portal. Log in to the Merchant Portal and go to the On-site messaging application. Once there, you will be redirected to the Installation section of the application.
On-site Messaging location inside Merchant Portal
2. Copy the installation snippet
Next you need to copy to clipboard the JavaScript Library code snippet by clicking Copy to clipboard zoomed on the image below.
Copying the On-site Messaging JS installation snippet
3. Add the JavaScript Library to your website
You need to add the snippet to your website code right after opening the <body> tag. See the below example of an HTML file with the JavaScript Library added.
Please note that the above is only an example. You will need to copy your own script from Merchant Portal, which has been generated specifically for your MID. The example only illustrates where to add the script.
Please follow our Best Practices to maximize the performance of your integration!
Adding placements
What is a placement?
A placement is an HTML tag with all the attributes required to deliver messaging on your website. You can think of it as the container for the messaging that JavaScript Library will deliver. Placements will need the purchase amount in order to display the correct payment or credit offer.
4. Locate the placement tags
Very similarly to the JavaScript Library, login to Merchant Portal and go to the On-site messaging application in order to obtain the placement tag. This time instead of the Installation section, go to the Placements section. Click on Placements (zoomed in the image below). You will see all the placements configured for your MID.
Placements section of On-site Messaging configuration
5. Copy the placements code
Please note: The numerical values in the placement preview are placeholders and are not necessarily representative of the true values you will see in a live integration.
Copy the code snippet for a placement by clicking Copy to clipboard (zoomed in the image below).
Copying the Placements Code
6. Install placement on your website
You can now add the copied tag to the desired location on your website. An example of the HTML with JavaScript Library and Placement installed would look like the code below.
Please note that the above is only an example. You will need to copy your own placement tags from Merchant Portal, which have been generated specifically for your MID. The example only illustrates how placements can be added to a website.
7. Publish the changes to your website
You are now ready to publish the changes to your site.