How to customize your Webchat using snippet code

We will show you how to customize your webchat using snippet code in this article.

So let’s dive into it!

This is a snippet code example that will guide you how to insert new custom code for different actions:

<div id="embedded_messenger">
              <div id="widget-launcher"></div>
              <iframe id="tactful_client" src="https://store.beta.tactful.ai/chatChannel.html"></iframe>
            </div>
            <script src="https://store.beta.tactful.ai/embed/embed.js"></script>
            <link rel="stylesheet" href="https://store.beta.tactful.ai/webchat/css/embed.css" />
            <script>
                var profile = <your profile name>;
                var token = xxxxxxxxxxxxxxxxxxxxxxx;
                var channelId = xxx;
                <! –– insert your custom code here ––>
                Tactful.start({ profile: profile, token: token, channelId: channelId });
            </script>
 

Below are some possible code customizations:

• Make your bot start with greeting customers! To call the restart intent, insert this line of code: 
  Action = ‘Restart’;
• Want to speak to the bot? Enable voice in chat by writing:
  voiceMode = true;
• To disable voice in chat: voiceMode = false;
• Some webchats automatically open once users log into the website. To make the widget closed by default, add this custom code:
  closeWebchat = true;
• To enable the “close” button to close webchat in mobile, insert this line of code:
  closeButton = true;
• Want the bot to automatically list your products menu? To browse, use this code:
  MAIN_MENU
• If you already have your customer’s info, make their lives easier and pass it to the bot, so that it doesn’t ask for this info again. To check data of the user who logged in your website add this line of code:
  User = {name: ‘x’, email: ‘y’, first_name: '', last_name: '', phone_number: };

Still, you can generally edit your messages “e.g. welcome message.” from the language editor.