{"id":26938,"date":"2026-11-11T04:17:48","date_gmt":"2026-11-11T04:17:48","guid":{"rendered":"https:\/\/blog.aismartcontent.co\/telewhats-chat-widget-website\/"},"modified":"2026-11-11T04:21:35","modified_gmt":"2026-11-11T04:21:35","slug":"telewhats-chat-widget-website","status":"publish","type":"post","link":"https:\/\/blog.aismartcontent.co\/en\/telewhats-chat-widget-website\/","title":{"rendered":"How to Add the TeleWhats Chat Widget to Your Website"},"content":{"rendered":"<p>The TeleWhats <strong>Chat Widget<\/strong> adds a chat button to your website. Visitors can ask questions, read help articles and see your latest news. Their messages arrive in your <strong>Inbox<\/strong>, and your AI assistant can answer them right away.<\/p>\n<h2>What you need<\/h2>\n<ul>\n<li>A TeleWhats account.<\/li>\n<li>Your website: a WordPress site, a Shopify store, or any site where you can paste a small piece of code.<\/li>\n<\/ul>\n<h2>Step 1: Connect your website<\/h2>\n<ul>\n<li><strong>WordPress<\/strong>: install the TeleWhats plugin and connect it to your account.<\/li>\n<li><strong>Shopify<\/strong>: install the TeleWhats app from your store and connect it.<\/li>\n<li><strong>Any other website<\/strong>: copy your widget&#8217;s embed code with <strong>Copy code<\/strong> and paste it just before the closing <code>&lt;\/body&gt;<\/code> tag of your pages. The widget only works on the website address you allowed for it.<\/li>\n<\/ul>\n<h2>Step 2: Style your widget<\/h2>\n<ol>\n<li>Open <strong>Chat Widget<\/strong> from the left menu and choose your widget at the top.<\/li>\n<li>Under <strong>Appearance<\/strong>, set the <strong>Widget title<\/strong> (for example &#8220;Chat with us&#8221;), the <strong>Accent color<\/strong> to match your brand, and the <strong>Placement<\/strong>, such as bottom right.<\/li>\n<li>Write a friendly <strong>Opening greeting<\/strong>, for example &#8220;Hi! How can we help today?&#8221;<\/li>\n<li>Under <strong>Widget language<\/strong>, choose to detect the visitor&#8217;s language or pick one, and set a <strong>Fallback language<\/strong>.<\/li>\n<li>Click <strong>Save Changes<\/strong>. The preview on the right shows how it looks.<\/li>\n<\/ol>\n<h2>Step 3: Add help articles and news<\/h2>\n<ul>\n<li><strong>Help<\/strong>: show short help articles inside the widget. Write them in your own words, or scan your website to bring them in.<\/li>\n<li><strong>News<\/strong>: show your latest updates. Paste the <strong>RSS or Atom URL<\/strong> of your blog, for example a WordPress category feed such as <code>https:\/\/yourblog.com\/category\/news\/feed\/<\/code>. New posts then appear in the widget automatically.<\/li>\n<\/ul>\n<h2>Step 4: Let your AI assistant answer<\/h2>\n<ol>\n<li>Open <strong>AI Training<\/strong>, go to <strong>Deploy<\/strong> and turn on web chat.<\/li>\n<li>If you use roles, open the widget&#8217;s <strong>Roles<\/strong> tab and choose which role answers on this widget. For example, a product-support role for your product site.<\/li>\n<li>Open your website in a private browser window and send a test message.<\/li>\n<\/ol>\n<h2>Tips<\/h2>\n<ul>\n<li>Keep the greeting short and inviting. A question works better than a statement.<\/li>\n<li>Show your team members in the widget so visitors know real people are behind it.<\/li>\n<li>Check the widget on your phone too, to make sure it does not cover important buttons.<\/li>\n<\/ul>\n<h2>Next steps<\/h2>\n<ul>\n<li><a href=\"https:\/\/blog.aismartcontent.co\/telewhats-ai-training-guide\/\">Train your AI assistant<\/a><\/li>\n<li><a href=\"https:\/\/blog.aismartcontent.co\/telewhats-inbox-reply-customers\/\">Reply to visitors from the Inbox<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Add a TeleWhats chat button to your website, style it, set the greeting and languages, show help articles and news, and let your AI assistant answer visitors.<\/p>\n","protected":false},"author":1,"featured_media":27756,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pmpro_default_level":"","footnotes":""},"categories":[687],"tags":[703,692,690,704],"class_list":["post-26938","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-telewhats","tag-chat-widget","tag-how-to","tag-telewhats","tag-website","pmpro-has-access"],"_links":{"self":[{"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/posts\/26938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/comments?post=26938"}],"version-history":[{"count":1,"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/posts\/26938\/revisions"}],"predecessor-version":[{"id":26953,"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/posts\/26938\/revisions\/26953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/media\/27756"}],"wp:attachment":[{"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/media?parent=26938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/categories?post=26938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.aismartcontent.co\/en\/wp-json\/wp\/v2\/tags?post=26938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}