Platforms: Website Embed

An embed to bring the power of automated conversations directly to your own website.

Install the Dexter Website Embed on your website

Paste the embed code from the Platforms page in the <head> section of any page you want the Dexter Website Embed to appear.

Configuration of the Dexter Website Embed

If you want to configure the Dexter Website Embed you need to insert some basic JavaScript ahead of the embed code. All customizations and extensions of Dexter's Website Embed belong inside of a window.dexterSettings global object.


<script>
  window.dexterSettings = {
   // the icon on the top left of the message panel
   logoIcon: 'https://...', 
   // the toggle icon to open the message panel
   openIcon: 'https://...',
   // the toggle icon to close the message panel
   closeIcon: 'https://...'
  }
</script>

Be sure to replace each URL above with a valid link to a .png, .svg, or .jpg image. If you don't want to replace a Dexter default image you can just leave the line out entirely.

For Developers: The Dexter Website Embed API

It is also possible to access the Website Embed from your code to do things like automatically open the dialogue box, send a welcome message, and more. Below you will find the complete API documentation of the Website Embed along with some sample code to help you get started.


<script>
   window.dexterSettings = {
      // a document query to the custom launcher
      customLauncher: '#link'
      // boolean indicating whether to hide the default launcher
      , hideDefaultLauncher: true
      // the icon on the top left of the message panel
      , logoIcon: 'https://...' 
      // the toggle icon to open the message panel
      , openIcon: 'https://...' 
      // the toggle icon to close the message panel
      , closeIcon: 'https://...' 

      /** 
       * The following methods are events that are called when the embed
       * is loaded, opened, or closed. See the client side API discussion
       * below for a description of functions available.
       */

      // a function that gives you a handle on the client side
      // api (see below) after the embed is loaded
      , onLoad: function (api) { }
      // called when the embed is opened
      , onOpen: function (api) { }
      // called when the embed is closed
      , onClose: function (api) { }
   }
 </script>

Client Side API

The client side API of the embed has the following methods available:

Method Description Parameters
toggle() Toggle open state of the embed
replyTo(message) Reply to a message and display the reply in the Website Embed. Useful for creating welcome messages. See Sending an intro message.
  • message(string): The message to send
isOpen() Returns a boolean with the open state
setTitle(title) Change the title of the embed
  • title(string): Updates the title in the Website Embed header. Default's to the bot's title.
open() Open the Website Embed
close() Close the Website Embed

Styling your Website Embed

You can override the web embed's CSS (in the .DexterWidget class space) to make it the size you would like. Feel free to override and style as you please!

Code Sample: Sending an intro message

Sometimes you want to pop up a message immediately on your site instead of waiting for the user to engage. Here's a code sample that shows how you can achieve that:


<script>
  window.dexterSettings = {
    onLoad: function (api) {
      api.open();
      api.replyTo("hello");
    }
  }
</script>
<script>
  // embed code here...
</script>

And in the default topic of your bot script you could have:

+ hello
- Hello and welcome to my website! What can I help you with? ^buttons("Existing Order", "New Order", "Questions about Ordering")