import Image from 'next/image'

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:

1. Edit the desired button, text, or icon in your theme editor.
2. 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:

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.