How can i use Mautic to fire a script based on a campaign?

Product Support
1

Your software
My Mautic version is: 5.1
My PHP version is: 8.2
My Database type and version is: MariaDB

I want to fire a TypeBot bot based on a Mautic’s campaign flow.
Any idea how?

I’ve tried with focus without success, custom html field also doesn’t work, even with a form and nothing… i guess the content is compiled to basic html… or something like that. Also tried with Dynamic content…

2

Hello, you can do it via Dynamic content, make sure it’s not campaign but filter based.
Also make sure you are using another browser to test not the one where you are/or was logged in as admin.

Joey

3

Thanks Joey but how would you do it? i mean, i have the following options to display a bot:

By opening a link: https://typebot.co/botsaddress;
By inserting a Wordpress shortcode: Typebot.initPopup({ typebot: “nameofthebot” });
By a Script:

"< script type=“module”>
import Typebot from ‘https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js’

Typebot.initPopup({ typebot: “botsname” });
</ script >"

Well if i paste the scrip in the Dynamic Content it will paste it as text in the slot. The same as any time of command i use for wordpress embed…

The solution i’m looking for is to fire the script based on a Mautic object so i can use segments. In example if a mautic contact is in a particular segment then start the bot when visiting a certain page.

4

You actually can’t do that.

Mautic (or the WYSIWYG editor) prevents you from adding JS to dynamic content.

Using a WordPress short code can’t work, because DWC is executed after WordPress handled rendering the web page.

5

You can use a div in DWC, which can be recognised by a 3 line Javascript code, so you can launch your script only if the DWC generates certain outcome.

This allows you to show a chat or popup only to people who Mautic thinks are worthy (for example hot lead). Or even hide if a contact is problematic :slight_smile:

Here is the explanation.

6

That is a super cool trick but have you tested in Mautic 5.1?
I followed your instructions and in my case the DWC editor also ignores the

tag when inserted via ‘Source’. The code disappears…

imagem

7

If I use the DWC editor in 5.x in source mode and save, then the content is gone. This is probably a bug.

I need to exit source mode before saving the DWC.

Try that, maybe this helps.

8

Picking up Joey’s idea and using AI i use this code in a Custom JS plugin in Wordpress and it worked.

Make the DWC and use filter option to select segmetns included or other options;
Then include the DWC on a page.

One thing to remember is that the DWC can’t be empty and in this example is named activecom. (from @joeyk solution)

So now i can fire a typebot ‘form’ or bot popup when a user belongs to a certain segments or profile criteria.

document.addEventListener("DOMContentLoaded", function() {
    var targetNode = document.querySelector('[data-slot="dwc"][data-param-slot-name="activecom"]');

    if (targetNode) {
        console.log('Elemento DWC encontrado, observando mudanças.');

        // Configuração do observador:
        var config = { attributes: true, childList: true, subtree: true };

        // Callback para executar quando mutações são observadas:
        var callback = function(mutationsList, observer) {
            for(var mutation of mutationsList) {
                if (mutation.type === 'childList' || mutation.type === 'attributes') {
                    console.log('Mudança detectada no DWC, disparando o Typebot.');
                    loadTypebot();
                    observer.disconnect(); // Desconecta o observador após a inicialização do Typebot
                    break;
                }
            }
        };

        // Cria uma instância do MutationObserver:
        var observer = new MutationObserver(callback);

        // Inicia a observação:
        observer.observe(targetNode, config);
    } else {
        console.log('Elemento DWC não encontrado.');
    }
});

function loadTypebot() {
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js';
    script.async = true;
    document.head.appendChild(script);

    script.onload = function() {
        if (typeof Typebot !== 'undefined') {
            Typebot.initPopup({
                typebot: "botsname",
                autoShowDelay: 3000
            });
        } else {
            console.error('Typebot não foi definido após o carregamento do script.');
        }
    };

    script.onerror = function() {
        console.error('Falha ao carregar o script do Typebot.');
    };
}
9

It needs to be from a click on an email or can be from an action? In a campaign you can create a webhook action and trigger your script sending the variables you want like firstname or email

1 Like