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>
