Add chat links to your store

By default, shoppers open the AI Assistant from its launcher bubble in the corner of your storefront. You can also open it from your own links and buttons — a "Chat with us" link in the footer, an "Ask about sizing" button on a size-guide page, or a call-to-action on a campaign landing page. Every extra entry point is another place a shopper can get help exactly where their question comes up.

There are three ways to wire it, from no-code to full JavaScript. Pick whichever fits where you're adding the link.

The three patterns

1. A data attribute (no JavaScript)

Add data-shoesy-open to any button or link. When a shopper clicks it, the assistant opens.

<button type="button" data-shoesy-open>Chat with us</button>

For other actions, use data-shoesy with the command name:

<button type="button" data-shoesy="maximize">Open full-screen chat</button>

Valid values are open, close, toggle, minimize, and maximize.

2. A hash link (no JavaScript)

Any link pointing to #shoesy-chat opens the assistant. This is handy in theme menus and rich-text blocks where you can only enter a URL, not custom HTML.

<a href="#shoesy-chat">Chat with us</a>

3. A JavaScript call

Call ShoesyAI.cmd(...) from your own scripts. Paste this small snippet once (for example in your theme's theme.liquid, before </head>) so the command works even if it runs before the assistant has finished loading — the call is queued and runs as soon as the assistant is ready:

<script>
  window.ShoesyAI = window.ShoesyAI || {
    q: [],
    cmd: function () {
      this.q.push(arguments);
    },
  };
</script>

Then, anywhere on the page:

<script>
  // Open the assistant
  ShoesyAI.cmd('open');

  // Other commands
  ShoesyAI.cmd('close');
  ShoesyAI.cmd('toggle');
  ShoesyAI.cmd('minimize'); // collapse back to the launcher bubble
  ShoesyAI.cmd('maximize'); // open the expanded, full-height panel

  // Ask whether it's currently open (answered via a callback)
  ShoesyAI.cmd('isOpen', function (open) {
    console.log('assistant open?', open);
  });
</script>

A theme-section example (Liquid)

If you build custom sections, here's a complete "Ask the Assistant" section a merchant can drop onto any page from the theme editor. It uses the data-attribute pattern, so it needs no JavaScript:

{% comment %} sections/ask-assistant.liquid {% endcomment %}
<div class="ask-assistant" style="text-align:center; padding:1.5rem 0;">
  <button type="button" class="button" data-shoesy-open>
    {{ section.settings.label | default: 'Ask about sizing' }}
  </button>
</div>

{% schema %}
{
  "name": "Ask the Assistant",
  "settings": [
    {
      "type": "text",
      "id": "label",
      "label": "Button label",
      "default": "Ask about sizing"
    }
  ],
  "presets": [{ "name": "Ask the Assistant" }]
}
{% endschema %}

Good to know

• These are a stable API. The command names and the #shoesy-chat hash link won't change without notice. window.ShoesyAI.v reports the API version (currently 1).
• Focus moves with the shopper. Opening from a link puts the cursor in the message box so a keyboard or screen-reader user can start typing right away; closing returns focus to the link they came from.
• It respects your settings. If the AI Assistant is turned off for your store, these commands do nothing and log a note in the browser console — nothing breaks on your page.
• What it can't do (by design). The API opens and closes the chat; it can't send messages, pre-fill text, or pass shopper details. This keeps the assistant free of anything a page script could misuse.

Need more help?

If a link isn't opening the assistant, check that the app embed is enabled (see Install guide) and that the button or link isn't inside another element that stops the click. Still stuck? Email support@shoesy.ai.