Prompting the Website Embed

Summary

Get the website embed to open based on a user's interactions with a website. For example, here might be two different CTAs you have on your site:

Snippet

JavaScript/HTML code:


<!-- Somewhere on your page -->
<script>
window.dexterSettings = {
    onLoad: function (api) {
        // expose the embed's API when it loads
        window.dexterApi = api;
    }
};

// respond to help click
function onHelpClick() {
    window.dexterApi.open();
    window.dexterApi.replyTo('embed help click');
}

// respond to the signup click
function onSignupClick() {
    window.dexterApi.open();
    window.dexterApi.replyTo('embed signup click');
}
</script>

<!-- In your body with the elements you want to trigger the embed -->
<a onClick="onHelpClick()">Get Help</a>
<a onClick="onSignupClick()">Sign Up</a>

Dexter "default" topic:

+ embed help click {weight=50}
- {topic=help} {@ start}
 
+ embed signup click {weight=50}
- {topic=signup} {@ start}

Dexter "help" topic:

+ start
- Hi! What would you like help with? ^buttons(Using Buttons, API Calls, Embed, Other)

Dexter "signup" topic:

+ start
- Hi! Welcome to this (imaginary) sign up flow! What is your name?
 
+ *
- <set name=<star>> Nice to meet you, <formal>. <send> What product are you most interested in? ^buttons(bots, bots, bots, bots) {topic=signup-product}

Dexter "signup-product" topic:

+ *
- <set product=<star>> Nice, <star>. <send> And lastly, what's your email? {topic=signup-email}

Dexter "signup-email" topic:

+ *
- <set email=<star>> Thanks for completing this imaginary sign up flow.

Explanation

The dialogue snippets here are relatively straightforward, using a combination of topic switching and <star>s to capture data (see our Onboarding Bot walkthrough for a more detailed explanation of this pattern). The HTML and JavaScript are a little more interesting:

For more information on the API and what you can do with it, see the full Client Side API.