Embedding webchat in selected webpages

Embedding webchat in selected webpages

Add your webchat widget to only specific pages on your website
Last Updated January 18, 2023
Table of Contents

Sometimes, you want your webchat widget to appear on some certain webpages not the entire website. In this article we’ll explain how to acheive this.

Copy snippet code

  • Choose your workspace, press Configuration from the left menu.
  • Click on Channels.
  • Pick your webchat channel.
  • Click the Platform Settings tab.
  • Press Deploy, then Copy snippet.

Your code will look something like this:


<div id="embedded_messenger">
        <div id="widget-launcher"></div>
        <iframe id="tactful_client" src="https://bot.beta.tactful.ai/chatChannel.html"></iframe>
</div>

<script src="https://bot.beta.tactful.ai/webchat/embed/embed.js"></script>
<link rel="stylesheet" href="https://bot.beta.tactful.ai/webchat/css/embed.css" />

<script>
        var profile = "yourprofilename";
        var token = "446164480a0.......2cabb74e1eaaa";
        var channelId = "XXX";
        Tactful.start({ profile: profile, token: token, channelId: channelId });
</script>
    

Divide the code

Add this part of your code to the website <head></head> tag:


<script src="https://bot.beta.tactful.ai/webchat/embed/embed.js"></script>
<link rel="stylesheet" href="https://bot.beta.tactful.ai/webchat/css/embed.css" />
 

Then add the rest of the code at the end of the <body></body> tag in the required page(s):


<div id="embedded_messenger">
        <div id="widget-launcher"></div>
        <iframe id="tactful_client" src="https://bot.beta.tactful.ai/chatChannel.html"></iframe>
</div>


<script>
         var profile = "yourprofilename";
         var token = "446164480a0.......2cabb74e1eaaa";
         var channelId = "XXX";
         Tactful.start({ profile: profile, token: token, channelId: channelId });
</script>
    
Want to learn more?
Was this article helpful?