Installation Guides
Shopify

Shopify Installation

Install the nuhello chatbot on your Shopify store.

Step 1: Access Theme Editor

  1. Log in to your Shopify admin dashboard
  2. Go to Online Store → Themes
  3. Find your current theme and click Actions → Edit code

Step 2: Edit theme.liquid

  1. In the left sidebar, under Layout, click on theme.liquid
  2. Find the closing </head> tag
  3. Paste the nuhello script just before </head>:
<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
  };
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>
</head>
  1. Click Save

Identifying Customers

To pass logged-in customer data to nuhello, use Shopify's Liquid variables:

<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
    {% if customer %}
    ,userId: "{{ customer.id }}",
    name: "{{ customer.name }}",
    email: "{{ customer.email }}"
    {% endif %}
  };
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Using Shopify App Embed (Alternative)

If you prefer not to edit code, you can use the Shopify App Embed feature:

  1. Go to Online Store → Themes
  2. Click Customize on your current theme
  3. Click App embeds in the left sidebar
  4. Enable the nuhello app (if available)

Adding a Chat Button

To add a custom button that opens the chat:

  1. Open the page or section where you want the button
  2. Add a custom HTML block or edit a Liquid file
  3. Add this code:
<button onclick="window.openNuhelloWidget()" class="chat-button">
  Chat with us
</button>
 
<style>
  .chat-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .chat-button:hover {
    background-color: #0056b3;
  }
</style>

Show Widget on Specific Pages Only

To show the widget only on certain pages:

<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
  };
 
  {% if template contains 'product' or template contains 'collection' %}
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
  {% endif %}
</script>

Pass Order Data

For post-purchase support, pass order data:

{% if checkout %}
<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID",
    orderId: "{{ checkout.order_id }}",
    orderTotal: "{{ checkout.total_price | money }}",
    email: "{{ checkout.email }}"
  };
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>
{% endif %}

Troubleshooting

Widget not appearing?

  1. Clear your browser cache
  2. Try viewing your store in incognito mode
  3. Check if the script appears in the page source (View Page Source)
  4. Verify your pixel key and bot ID

Conflicts with other apps?

Some Shopify apps may conflict with external scripts. Try:

  • Disabling other chat apps temporarily
  • Moving the script to the bottom of theme.liquid, just before </body>

Preview vs Live Store

The widget may not appear in the theme editor preview. Test on your actual store URL.

AngularWix