Some contacts are more important then others. If you profile evaluate your anonimous visitors with points or other means using Mautic’s dynamic web content is perfect for targeting them. It’s easy to show them any html content. In this post I’ll show you how to trigger an external service like a popup or a chat to boost your conversion rate.

Important: I won’t actually show you what chat or external popup service you should use, but I’ll show you how to envoke a Javascript script via DWC.

The challenge

You need this workaround, because Mautic clears out all javascript from your editor. If you enter something like this, the editor won’t save it:

I choose this simple script to display the one line of text in the console just for testing purposes. You can replace it with any Javascript.

Once you save the code, Mautic will remove it.

But this is a perfect place to add a chat button or a custom popup, maybe even a specific countdown that includes special code. And this can be done only by Javascript.

In order to do so I use the following trick.

The solution

We can’t save javascript, but we can save divs. And named divs can be monitored by javascript. So this is what you need to do:

Step 1: Create a filter based Dynamic content.

In my example I’d like to launch the JS to those contacts who have more then 100 points. Using a campaign I set a boolean custom field for them to yes, this way I can use a filter in DWC to talk to them. Any contact who is important + has no email address will have this boolean set as yes.

My DWC filter looks like this:

Step 2: Create Dummy DWC

In order to launch our javascript, we need to add a Div, that will launch our Javascript. It can be just a dummy text, I usually go for this:

<div name="activecom"><span>&nbsp;</span></div>

We want to show an empty space character in a div, that is named “activecom”. You can’t save a Javascript, but you can save a DIV 🙂

Step 3: Add DWC to Page

For testing purposes I use a Mautic Landing Page, but it can be WordPress or any other CMS:

<div data-slot="dwc" data-param-slot-name="activecom">
   <h1>Not a match</h1>
</div>

For testing the text “Not a match will be visible if activecom is not 1 for the contact visiting.

Step 4: Add Javascript to Header/Footer

Now we need to add our JS to the Footer or Header of the page. It can be a Mautic Landing Page, or a WordPress page, doesn’t matter.

Our script looks like this:

console.log("We Launched a script now.");

Our goal is to fire the JS only if our contact has the activecom = 1 value, in other words the <div name=”activecom”> is present. We can wrap it in a Javascript:

<script>
document.addEventListener('DOMContentLoaded', function () {
    var element = document.querySelector('div[name="activecom"]');
    if (element) {
        // The element exists, we can execute the JavaScript
        console.log("We Launched a script now.");
        // Your JavaScript code comes here
    }
});
</script>

Step 5: Testing time

Now when I visit the page, I can see the default dynamic content appearing for the visitor without the ‘activecom’ value. In order to check if it really works, I also need to see the developer console to control if javascript was fired:

Now let’s visit with a contact, with a 1 activecom value:

As you can see our DWC is showing the ’empty’ content as we wanted, so we know that the contact is recognised. And we also managed to launch our script.

Enjoy 🙂