How to embed txt.me live chat box in a website

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 chatbox code)

Related Posts

Was this page helpful?
YesNo
In this Article