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.
Before you get started, make sure you have everything you need:
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.
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
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
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!
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.
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
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
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.
You are now ready to publish the changes to your site.