Adding live chat to your website usually comes down to pasting a single JavaScript snippet into your site's HTML, and it typically takes less than five minutes. The live chat widget is that small chat bubble visitors see in the bottom-right corner of the page. When installed correctly, the code does not slow your site down, works on mobile, and serves both human chat and an AI chatbot in the same window. In this guide you will see exactly how to add the live chat code on HTML, WordPress, Shopify, and custom-built sites.

The logic is the same on every platform: you take the unique embed code from your provider and place it where it will load on every page of the site. The only difference is where you paste it. Below we walk through the most common scenarios one by one.

How a Live Chat Widget Actually Works

A live chat widget is built from three parts. The snippet you add to your site calls a small JavaScript file that loads asynchronously in the browser. That file draws the chat bubble on screen and relays messages to the server in real time whenever a visitor types.

Once a message reaches the server, either an AI chatbot replies automatically or the conversation is handed over to a human operator. In modern widgets the two work together: a knowledge-base-driven AI answers routine questions instantly and escalates complex cases to a live agent.

The key detail is that a well-written widget loads asynchronously, meaning it never blocks the rest of your page. That is why your Core Web Vitals and SEO performance stay intact.

Adding the Chat Code to an HTML Site

If you run a hand-coded or static HTML site, installation is as direct as it gets. You simply add the provider's snippet right before the closing </body> tag.

  1. Copy your unique live chat embed code from the Yanıtly dashboard.
  2. Open your site's HTML file in an editor (for example index.html).
  3. Find the closing </body> tag at the bottom of the page.
  4. Paste the copied script right before that tag.
  5. Save the file, upload it to your server, and refresh the site.

To show the widget on every page, add the code to a shared template such as a header or footer include file. That way you avoid editing each page individually. Placing the code before </body> instead of inside <head> lets your visible content load first.

Adding Live Chat to WordPress

There are several ways to add a live chat snippet on WordPress. The cleanest method lets you install it without touching theme files.

  • With a plugin: Install a free plugin like WPCode or Insert Headers and Footers, paste the widget code into the Footer field, and save. The code survives theme updates.
  • With the theme editor: Go to Appearance > Theme File Editor, open footer.php, and add the code before </body>. Since theme updates can wipe this out, use a child theme.
  • With a page builder: If you use Elementor or similar, a custom HTML/code widget lets you add chat to specific pages only.

For WooCommerce stores, the widget answers visitor questions right on the cart and checkout pages, helping reduce cart abandonment. The setup follows the same WordPress logic and requires no special steps.

Shopify and Other E-commerce Platforms

To add live chat to a Shopify store, you edit the theme code. From the admin, go to Online Store > Themes > Edit code, open theme.liquid, and paste the widget code before the </body> tag. Once saved, the widget appears across all store pages.

Most storefront builders and e-commerce platforms offer a "custom code" or "head/footer script" field. You just drop the Yanıtly widget code into it. When setting up chat on an e-commerce site, teaching your AI about shipping, returns, and stock questions dramatically lightens the operator's workload.

If you use Google Tag Manager, you can also deploy the widget as a custom HTML tag through GTM. This route is practical for marketing teams that want to manage code without developer help.

Testing and Verifying After Installation

After adding the code, always confirm the widget works correctly. The steps below help you catch the most common mistakes.

  1. Open your site in an incognito tab and confirm the chat bubble appears in the bottom-right corner.
  2. Send a test message and check that it arrives instantly in the AI or operator panel.
  3. Test on a mobile device to make sure the widget does not overflow and buttons stay reachable.
  4. Measure page speed and confirm the widget has no meaningful impact on load time.
  5. Verify that the correct away message shows outside business hours.

If the widget does not appear, the usual culprits are: the code added to the wrong page, browser cache, or an ad blocker blocking the script. Clearing the cache and reloading the page resolves most issues.

Data Privacy and Compliance

Because a live chat widget can collect personal data such as name, email, or phone number, do not overlook privacy compliance during setup. Where the data is stored, how long it is retained, and whether a consent notice is shown all matter.

For businesses operating in Turkey, processing data domestically and structuring explicit-consent flows correctly is a legal requirement under KVKK. Yanıtly manages every widget conversation within the KVKK framework, with consent-notice display and data retention periods configurable from the dashboard.

Conclusion

Adding live chat to your website is, regardless of platform, a single snippet and a few minutes of work. By placing the widget before </body> on HTML, WordPress, Shopify, or any e-commerce stack, you open a channel that responds to visitors instantly.

With Yanıtly, completing this step gives you more than text-based live chat: you unify a knowledge-base-driven Turkish AI chatbot, WhatsApp, Instagram, and email in a single panel. It is fully KVKK-compliant, priced in TL, and comes with a voice AI call assistant. Generate your Yanıtly widget code today and go live in just a few minutes.

Frequently asked questions

How long does it take to add live chat to a website?

On most sites it takes under five minutes. You simply paste the JavaScript embed code from your provider right before the closing body tag. On platforms like WordPress or Shopify, the same task is done in a few clicks through a plugin or the theme editor.

Does the live chat code slow down my website?

A properly built widget loads asynchronously, so it never blocks the rest of your page content. This keeps your Core Web Vitals and SEO scores intact. Placing the code before the closing body tag rather than in the head ensures visible content loads first, preserving performance.

How do I add live chat to WordPress?

The cleanest method is installing a plugin like WPCode or Insert Headers and Footers and pasting the widget code into the Footer field; it survives theme updates. Alternatively, use a child theme and add the code to footer.php just before the closing body tag.

Should a live chat widget be privacy compliant?

Yes. Since the widget can collect personal data such as name, email, or phone, consent-notice display, explicit-consent flows, and data retention must be handled under privacy law like KVKK. Yanıtly manages all conversations within that framework, and these settings are configurable from the dashboard.

I added the widget but it does not show, why?

The most common causes are code added to the wrong page, browser cache, or an ad blocker blocking the script. First clear the cache and reload the page in an incognito tab. Make sure the code is added to a shared template such as the footer so it loads on every page.

Content source: Yanitly guide library

Published: 2026-06-06 · Content updated: 2026-06-06