Onsite Widget installation

Looking for the WhatsApp Bubble instead? Check out the WhatsApp Bubble installation guide.

The Onsite Widget is an AI Shopping Assistant that runs directly on your website. It provides:

Full chat experience with a modal or side-panel dialog
Product carousel with variant selection
Shopify cart integration for seamless add-to-cart functionality
Persistent conversations across page navigation
Customizable appearance with colors, texts, and positioning

You install it once, from the Shopify theme editor. After that, TextYess is the source of truth: every change you save in the dashboard goes live on your store automatically. You never paste or update code.

Switch on the TextYess app embed

In TextYess, open Agents → Onsite Agent and select the Appearance tab. In Widget installation, click Open Shopify Theme Editor. The theme editor opens with the TextYess app embed selected.Toggle TextYess on, then click Save.

You can also get there manually: in the Shopify theme editor, open App embeds from the left sidebar and toggle TextYess on.

This is the same app embed that powers the TextYess pop-up. One toggle installs both. Each one appears only when you switch it on in TextYess, so turning the app embed on never shows a widget you did not set up.

Switch the widget on for your store

On the Appearance tab of Agents → Onsite Agent, the first card is Store visibility. It shows whether the widget is Live or Hidden on your store, and whether the app embed is active in your theme.Turn on Show the widget on my store. The widget shows on your storefront at the next page load. Turn it off at any time to hide it again, with no theme edit.

Publishing your settings never changes store visibility. Only this switch does, so you can prepare the widget in full before shoppers see it.

Customize your widget in TextYess

On the Appearance tab of Agents → Onsite Agent you can customize:

Colors: Main Color and Text Color
Text: Badge Text, Dialog Title and Welcome Message
Position: Right Center, Bottom Right, Bottom Center or Bottom Left
Display: centered modal or side panel
Bubble image: an optional image on the closed bubble
Popular Questions: up to 3 suggested questions for customers to ask

Click Publish and refresh your storefront. The widget picks up your changes automatically — no theme edit needed.

Congratulations, you are live!

When the app embed is off

TextYess reads the home page of your store about once an hour. This check shows if the TextYess app embed is on in your published theme. If the app embed is off, the Store visibility card shows a warning with the name of your published theme. This often happens after you publish a copy of a theme. A copy that you made before you installed TextYess does not have the app embed.

On the warning, click Turn it on in Shopify. The theme editor opens on the App embeds drawer of your published theme.
Turn on TextYess, then click Save.
Go back to the Store visibility card and click Check again.

A store that loads the widget from a pasted code snippet does not need the app embed. For these stores, the card shows no warning.

Already installed with a pasted code snippet?

Earlier versions of TextYess asked you to paste a code snippet into theme.liquid. If your store still has one:

Switch on the app embed (step 1 above).
Remove the old <textyess-ai-widget> snippet from your theme.

Your store never shows two widgets: while both the snippet and the app embed are present, only one renders. Pasted snippets also receive live updates now, so there is no rush — but removing the snippet keeps your theme clean. The Store visibility switch does not apply to a pasted snippet: it stays live with the styling written into its code, whatever the switch says. To control visibility from TextYess, move to the app embed and remove the snippet.

Custom trigger element

You can open the chat from your own button or link instead of (or in addition to) the default floating bubble. Set Custom trigger selector (optional) in the Trigger & Visibility card of the Appearance tab (Agents → Onsite Agent) to a CSS selector that matches your element, for example #ask-ai-btn or .open-chat. Any matching element opens the chat when clicked. You can also turn on Hide floating bubble in the same card.

Using the JavaScript API

For programmatic control, call methods directly on the widget element:

<script>
  // Wait for the widget to be ready, then call methods
  customElements.whenDefined('textyess-ai-widget').then(() => {
    const widget = document.querySelector('textyess-ai-widget');

    // Open the chat
    widget.open();

    // Close the chat
    widget.close();

    // Toggle open/closed
    widget.toggle();
  });
</script>

Get Started

Campaigns

Email

Automations

Contacts

Inbox

AI agents

Analytics

Growth Tool Kit

Account

Shopify

WooCommerce

Magento

Helpdesks and marketing tools

TextYess MCP

Flows API

Orders API

Conversations API

Products API

Campaigns API

Analytics API

Onsite Widget installation

When the app embed is off

Already installed with a pasted code snippet?

Custom trigger element

Using the JavaScript API