How to Use Deep Link to Open the Chat Window (Without Editing Theme Code)

You can open the chat window by using a deep link without modifying your theme’s code. In the Shopify Theme Editor, simply add the hashtag #shoply-ai-chatbot to any button, icon, or text element. When customers click on these elements, the chat window will automatically open.

Live example: demo.shoplyai.ai

Steps:

Edit the desired button, text, or icon in your theme editor.
Set the link or URL to #shoply-ai-chatbot.

Examples:

Use a button to open the chat window:

Use a linked text to open the chat window:

Open Chat with a Pre-filled Question

Want to open the chat window and automatically send a question? Use the shoply_question URL parameter.

This is perfect for creating direct links to common topics like shipping policy, return policy, or product inquiries.

Format:


https://your-store.com?shoply_question=your question here

Examples:

Shipping Policy: https://your-store.com?shoply_question=What is your shipping policy?
Returns: https://your-store.com?shoply_question=How do I return an item?
Order Status: https://your-store.com?shoply_question=Where is my order?
Product Discovery: https://your-store.com?shoply_question=What class 2 e-bikes are available under $2000?

Note: Remember to URL encode your question when using special characters or spaces. Most browsers will handle this automatically, but if you’re adding links programmatically, use proper URL encoding (e.g., spaces become %20).

When a customer clicks a link with the shoply_question parameter, the chat window will automatically open and the question will be sent to the AI chatbot, providing an instant answer.

Use Cases:

Add a “Ask about shipping” link in your footer
Create QR codes that open the chatbot with specific questions
Include helpful links in your email campaigns or order confirmations
Add contextual help links on product pages (e.g., “Ask about sizing”)

Tip: You can combine this with any page on your store. For example, to open the chatbot with a question on a specific product page:


https://your-store.com/products/blue-jacket?shoply_question=What sizes are available?

How to Use Deep Link to Open the Chat Window (need to edit the code in Theme template)

In the previous section, we discussed how to use the hashtag (deep link) to trigger the chat window by adding it to any button, icon, or text directly from the Theme Editor, without editing your theme’s code.

However, if you’d like to have full flexibility to add the deep link anywhere on your store (e.g., creating a new icon in the header), you will need to edit the template code.

Below are simple HTML code examples you can use to create new icons in your Theme template:

Code Examples

1. Chat Icon

The code below adds a chat icon:


<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. AI Star Icon

The code below adds an AI star:


<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. Function Call Method

Besides using hashtags, you can also put the function call openShoplyAIChatBot() to the onclick attribute of any button/icon, so that customers will see the chat window when they click the button/icon.


<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

Need Help?

You can use any of the examples above, and inject the code next to the search icon in the sections/header.liquid file, to add the chat deep link to your store’s header.

However, if you’re not entirely comfortable editing the code in your Theme template, don’t worry!

Feel free to book a meeting with us , and we’ll gladly help you set up the perfect icon in the ideal spot to match your store’s unique vibe.

How to Hide the Floating Icon?

Once you configure the deep link to open the chat window. You may want to hide the floating icon. Also, store owners often mention that having too many floating icons on their websites can be overwhelming. We understand your concerns! That’s why we’ve introduced a feature to hide the chat icon.

In the “Customize AI Chat” section of the app’s admin console, under the Select a Chat Icon settings, you can now select the:

“Hide floating icon and use deep link to open chat” option.

This allows you to hide the floating icon while still enabling the chat window to open via a deep link.