Add chat or sales triggers to Checkout Guru

The sales page is where your customer decides whether or not to buy, so that is where most sales triggers (or mental triggers) should be. In contrast, the payment page (checkout) should provide a simple, fast, and objective shopping experience, avoiding any kind of doubt or distraction for the buyer.

Our philosophy is to offer a high-converting checkout and, to ensure this result, we eliminate any and all components that might increase page loading time or take the buyer's focus away from what really matters: entering payment details and completing checkout as quickly as possible.

Although our recommendation is a clean checkout free of additional components, alternatively, you can include external scripts in Checkout Guru for:

• Chat or whatsApp button;

• Tracking conversions on TikTok (or another advertising platform not integrated with Guru);

• Sales triggers such as scarcity timer, notification, banner, or pop-up.

Configuration and installation

The configuration and installation of components for a chat button, scarcity timer, notification, banner, pop-up, or any other script external to Checkout Guru is performed via Google Tag Manager.

Installing the script consists of configuring a Custom HTML Tag in GTM and publishing it. The script must be obtained from the desired plugin or component or written by a developer with the skills to build scripts for GTM.

On this page:

• Step-by-step: Install Javascript code in Checkout Guru via GTM

• Add banner and videos to Checkout Guru

Step-by-step: install Javascript code in Checkout Guru via GTM

To install an external script in Checkout Guru via Google Tag Manager, you must complete 3 steps:

Steps:

1 - Install the GTM script on your website;

2 - Configure the tag; and add the trigger;

3 - Publish the tag.

Step 1 - Install GTM Script on your website

Steps:

1 - Access your Google Tag Manager. account.

2 - Click on Admin.

3 - Then click on Install Google Tag Manager.

4 - Copy and install the Google Tag Manager Scripts on your sales page, following the instructions provided.

Step 2 - Configure Tag

Steps:

1 - Access the Tags menu and then click on New.

2 - Go to Tag Configuration, and then select the Custom HTML. option.

3 - Insert the desired Script¹ into the HTML. field.

¹ The desired script must be obtained from the plugin, component, or developer.

4 - Click on Save.

Step 3 - Add a trigger

Steps:

1 - In the Triggering field, click on Choose a Trigger.

2 - Click to Add a New Trigger.

3 - Click on Trigger Configuration, and under Choose trigger type, select the following trigger:

1. Window Loaded

4 - Click on Submit.

5 - In Trigger Configuration, enter:

1. This trigger fires on: select the event you want to trigger;

2. Destination URL: enter the Checkout Guru URL (which starts with https://clkdmg.site/subscribe/ (standalone) - if you use Guru's custom domain feature, replace clkdmg.site with your domain).

6 - Click on Save.

7 - Enter the Trigger Name.

8 - Click on Save.

9 - Enter the Tag Name.

10 - Click on Save.

11 - Next, the created Tag will appear, and then click on Submit.

12 - In Submit Changes, enter the Version Name.

13 - Click on Publish.

14 - Open the Checkout Guru link in an incognito tab and check the loading time, then perform a test purchase to validate that everything is working properly.

Add banner and videos to Checkout Guru

With Guru's Checkout, you can customize the appearance of your payment page using image banners or videos to engage your customers.

Choose the format type you want to add and check the step-by-step:

• Image Banners: adding image banners is now done natively directly in your Checkout settings, without the need for scripts. Click here to see how to configure image banners in Checkout.

• Video Banners: if you want to add a video to the banner area of your Checkout, use the script provided below.

<script>
    var link = "https://youtu.be/TZzntmaXfwU" //<- URL para o vídeo

    var bannerDiv = document.getElementById("gtm-banner")
    if (bannerDiv && !bannerDiv.querySelector("video")) {
        var video = document.createElement("video")
        video.src = link
        video.autoplay = true
        video.loop = true
        video.muted = true
        video.controls = false
        video.style.maxWidth = "100%"
        bannerDiv.appendChild(video)
        bannerDiv.style.justifyContent = "center"
    }
</script>

More Resources