Userdesk
Home
  • 👋Welcome to Userdesk
  • Overview
    • 💡What we do
  • âš¡Product Guides
    • Training data
      • Sitemaps
        • Shopify Store
        • Gitbook
    • Chatbot configuration
      • Welcome message
      • Escalate to human
      • Missing response message
    • Add the Chatbot widget to your website
      • WordPress
      • Shopify
      • Webflow
      • Wix
      • Notion pages
      • Any Website
    • Slack integration
    • JavaScript Widget
    • Customize Widget CSS
    • Chat Widget Changelog
  • 📖API
    • Authentication
    • Create a conversation
    • Send a message
Powered by GitBook
On this page
  • Train the AI Chatbot on your store
  • Orders status
  • How to add the AI Chatbot bubble to your e-commerce store website

Was this helpful?

  1. Product Guides
  2. Add the Chatbot widget to your website

Shopify

Add an AI Chatbot to your store in less than 5 minutes

PreviousWordPressNextWebflow

Last updated 1 year ago

Was this helpful?

Providing timely responses to your eCommerce website is key to gaining trust and making more sales online.

You can embed the Userdesk AI Chatbot to your Shopify store, to reply to the questions of your users, even on your products!

Train the AI Chatbot on your store

All Shopify stores automatically generate a sitemap.xml file that contains links to all your products, primary product images, pages, collections, and blog posts.

You can find your sitemap in the root directory of your Shopify store's domains, such as johns-apparel.com/sitemap.xml.

Add the and train your Chatbot on it. The AI will retrieve the information of your products, and automatically reply to the questions of your visitors.

Orders status

The Chatbot widget of Userdesk provides a special integration with your Shopify store.

It automatically retrieves the status of the orders, so that they are available to your users in the support chat.

How to add the AI Chatbot bubble to your e-commerce store website

To add the AI Chatbot bubble widget to your Shopify store follow these instructions:

  • Select your store

  • Click on Online Store

  • Click on Themes

  • Click on the Customize button on your current theme

  • Click on the three dots at the top of the page and click Edit code

Now you need to find a theme file that is used on every page, usually, it is called index.liquid

Click on the file name and paste this code.

<script 
	async 
	src="https://d3kno6bpmj270m.cloudfront.net/widget/userdesk.js" 
	data-userdesk="your_chatbot_id">
</script>

<script>
    window.userdeskShopifyCustomer = { "has_account": {{ customer.has_account }}, "email": "{{ customer.email }}"};
    window.userdeskOrders = [];
      {% for order in customer.orders -%}
        userdeskOrders.push({ 
          "order_status_url": "{{order.order_status_url}}",
          "fulfillment_status_label": "{{order.fulfillment_status_label}}",
          "order_name": "{{order.name}}",
          "total_price": "{{ order.total_price }}",
          "items_size": {{order.line_items.size}},
          "line_items": [
            {% for line_item in order.line_items -%}
            {
              "tracking_company": "{{line_item.fulfillment.tracking_company}}",
              "tracking_number": "{{line_item.fulfillment.tracking_number}}",
              "tracking_url": "{{line_item.fulfillment.tracking_url}}",
              "item_count": "{{line_item.fulfillment.item_count}}",
              "product_description": "{{line_item.product.description}}",
              "product_title": "{{line_item.product.title}}",
              "featured_image": "{{line_item.product.featured_image | img_url: '120x' }}",
              "product_images": [
                {% for image in line_item.product.images -%}
                  {
                    "preview_image": "{{image.preview_image | img_url: '120x' }}",
                    "src": "{{image.src  | img_url: '120x' }}",
                    "aspect_ratio": "{{image.aspect_ratio}}"
                  }{%- if forloop.last == false -%},{%- endif -%}
                {%- endfor %}
              ],
              "url": "{{line_item.url}}",
              "title": "{{line_item.title}}"
            }{%- if forloop.last == false -%},{%- endif -%}
            {%- endfor %}
          ]
        });
      {%- endfor %}
</script>

Open the

Remember to replace your_chatbot_id with the ID of your Chatbot. You can take it from the of your Chatbot on Userdesk.

Finally, click on Save Your Shopify store is now configured with an AI Chatbot 🎉 If you have any issues adding Userdesk to your Shopify Store, feel free to reach out to us at

âš¡
Shopify Admin panel
Embed section
support@userdesk.io
sitemap URL to Userdesk
Shopify store integration