Platforms: Website Embed

An embeddable web widget to bring the power of automated conversations directly to your own website.

Website Embed Screenshot

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 open the dialogue box when [prompted by a button click]((/walkthroughs/snippets/prompting-web-embed). 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!

Troubleshooting

Can I add this bot to my Wordpress site?

Yes, you can! Add a Dexter bot to your Wordpress site by including this website embed script in your site's header.

My web widget is not appearing.

Run through this checklist to see what might be the issue: * Check if you've included the web embed <script> tag in the <head> of your site. Did that and still doesn't appear?

Buttons are not appearing on my web widget!

Is your CSS overriding the default Dexter CSS that enables buttons to perform as expected? Try stripping your CSS and see if you can recreate this behavior. If so, please message us in-app with your setup settings.