Table of Contents

Conditional Welcome: Direct the Flow of Your Bot Based on External Parameters

Abby Updated by Abby

There are several instances where we may need a dynamic bot with different flow options.

In this example, we'll create two different flows for our user, depending on an external parameter, in this case, a parameter in the URL that determines whether they're a new user, or a returning user.

For this workaround, we'll add a Javascript function to the container page which we'll then trigger from the welcome message, but don't worry it's just a matter of copying and pasting!

Step One

Let's start with the builder.

In the builder you need first delete the buttons in the Welcome Message block:



Step Two

Now we need to create the Global Keywords to redirect based on the input that we will send:



Step Three

Just in case, connect the Welcome Message block, as it will be the "default" exit if the param that we send is wrong or missing

Step Four

In the Design Section we will "hide" the Welcome Message block with JS:

<script>
var landbotScope = this;
this.onLoad(function() {
    if (window.param != null) {
        // Create a new stylesheet
        var styleSheet = landbotScope.document.createElement("style");
        landbotScope.document.head.appendChild(styleSheet);

        // Define the CSS rule
        var cssRule = '[data-block="welcome_0"] {display:none !important;}';

        // Insert the rule into the new stylesheet
        styleSheet.sheet.insertRule(cssRule, 0);
    }
});
</script>

Step Five

We need now to set up the function that will execute with the loading of the bot in the page where the bot is embedded:

The string 'flow' will be what you change for your particular parameter

        myLandbot.core.events.on("load", () => {

            let searchParams = new URLSearchParams(window.location.search)

            // The string 'flow' will be what you change for your particular parameter
            
            window.param = searchParams.get('flow') || "default"

        }
        )

        myLandbot.core.events.on("init", () => {

            if (param != null) {
                myLandbot.sendMessage({ type: 'hidden', payload: param })
            }
        }
        )

The most important part of this script is this:

myLandbot.sendMessage({ type: 'hidden', payload: param })

It will send "a message", that is hidden, and the variable "param" is the one that needs to match with the values in the global keywords.In the example above, we capture a param in the URL and use it in the param variable

Obviously, you can adapt the script, to use internal JS values, instead of the URL param.

I hope this workaround opens a new set of opportunities for your bots!

Template

This template has already the structure and script that goes on the builder. If you want to use it, please don't forget to add the script that goes in the container page.

Just click here for the template

How did we do?

Modifying Embed Size

Detect if bot was opened

Contact