By default, the txt.me chatbox shows up on your website as a widget in the bottom-right corner.
In this guide, we will show how with minimum coding you can make rendering in an <div> anywhere on your website. It might be helpful if you decided to integrate the live chat on your support page, knowledge base, popup window, or in any special section.
Embed Chat Box
Here the chat box is shown right in the middle of the blog post. This is a real live chat with our customer service agents. Feel free to ask us any questions.
ChatBox HTML Source Code
Here is the code that made it happen, install it in the section of your website:
<script type="text/javascript">
window.txtmeData = {
settings: {
chatToDiv: '#exampleDivId'
},
};
(function (w,d,c,i) {
w[c]=w[c]||[];
var n = d.getElementsByTagName('script')[0],
s = d.createElement('script');
s.src = 'https://v2.txt.me/livechat/js/wrapper/' + i;
s.type = 'text/javascript';
s.async = true;
n.parentNode.insertBefore(s, n);
})(window,document,'txtmeData','000000000000000000000000000000');
</script>The HTML code for the <div> where the chat box has shown up looks like this:
<div id="exampleDivId" style="width: 300px; height: 500px; margin:auto;box-shadow: rgba(164, 164, 164, 0.49) 0px 2px 24px;"> </div>
To finish the installation replace the exampleDivId with the id of the HTML element you want the widget to render to and replace the 000000000000000000000000000000 with the id number of your widget.
You can take it from the default HTML chat box code in your admin panel, which looks like this:
<!-- Start of txt.me widget code --> <script src="https://v3.txt.me/livechat/js/wrapper/cfa2f53fca55424686ea224b03a2aa79" async></script> <noscript><a href="https://txt.me/reviews/cfa2f53fca55424686ea224b03a2aa99" rel="nofollow">Rate customer support</a>, powered by <a href="https://txt.me" rel="noopener nofollow" target="_blank">txt.me</a></noscript> <!-- End of txt.me widget code -->