Skip to content

Install guide · Shopify

Add the Quackback widget to Shopify

Paste one snippet into your Shopify theme and the launcher appears across your store. Shoppers can ask questions, request products and read your updates without leaving the page.

Get your widget snippet

  • 14-day Pro trial, no card needed
  • Your workspace URL and snippet, ready to copy
  • The widget is on every plan, including Free

The widget your customers see inside your app.

Your team’s viewYour customers’ view
Feedback
Review
Status
Board
Tags

Install the widget in Shopify

First, in Quackback, open Settings, then Widget, and turn on Show on your website. Until it's on, the snippet loads but the launcher stays hidden. Every snippet uses your-workspace.quackback.io as a placeholder. Swap in your workspace URL, or your custom domain, from Settings, under Widget, then Install.

Read the full install docs

Copy your snippet

In Quackback, open Settings, then Widget, then Install. The snippet there has your workspace URL filled in. It looks like this.

snippet
<script>
  (function(w,d){if(w.Quackback)return;w.Quackback=function(){
  (w.Quackback.q=w.Quackback.q||[]).push(arguments)};
  var s=d.createElement("script");s.async=true;
  s.src="https://your-workspace.quackback.io/api/widget/sdk.js";
  d.head.appendChild(s)})(window,document);
  Quackback("init");
</script>

Duplicate your theme

In Shopify admin, go to Online Store, then Themes. Duplicate your live theme first, so you have a copy to go back to.

Paste it into theme.liquid

Open the theme's menu and choose Edit code. Under Layout, open theme.liquid, paste the snippet just before </body>, and save.

layout/theme.liquid
    ...
    <script>
      (function(w,d){if(w.Quackback)return;w.Quackback=function(){
      (w.Quackback.q=w.Quackback.q||[]).push(arguments)};
      var s=d.createElement("script");s.async=true;
      s.src="https://your-workspace.quackback.io/api/widget/sdk.js";
      d.head.appendChild(s)})(window,document);
      Quackback("init");
    </script>
  </body>
</html>

Identify signed-in users

Liquid can't sign the token the widget needs, and the signing secret must never sit in theme files. Leave shoppers anonymous, or sign tokens from an app or server you control.

How identify works

Leave visitors anonymous

Visitors can post ideas, vote and chat without an account, and can leave their email inline so you can reply. That covers most marketing sites and stores.

Or sign tokens on your own server

If your customers sign in through a service you control, that server signs a five-minute HS256 token with the signing secret from Settings, under Widget, then Install. The page passes it to identify. Never paste the signing secret into the site itself, because anyone can read it there.

page script
// ssoToken comes from your own server, signed for this user
Quackback("identify", { ssoToken });

// When they sign out
Quackback("logout");

Good to know on Shopify

Widget events and methods
Theme updatesShopify warns that edits to theme code can be lost when you update the theme. Check the snippet is still there after an update.
CheckoutTheme code doesn't run on Shopify's checkout pages, so the widget shows on your storefront but not in checkout.
Default boardSend ideas to one board by changing the snippet's last line to Quackback("init", { defaultBoard: "product-requests" }), using your board's slug.

Common questions

Is there a Quackback app in the Shopify App Store?

Not yet. The snippet in theme.liquid adds the widget to every storefront page in a couple of minutes.

Can shoppers chat with my team through the widget?

Yes. Messenger, the live chat in the widget, sends their messages to your team's inbox in Quackback, alongside email and feedback.

Will the widget slow down my site?

The script loads asynchronously, and the panel loads in an iframe when the browser is idle, so it stays off your critical path. Its theme and settings come from your workspace, so changing them needs no redeploy.

Is the Quackback widget free?

Yes. The widget is on every plan, including Free, with feedback, live chat, help articles and your changelog inside it. Every signup starts with a 14-day Pro trial.

Have another question? Talk to the team.

Put feedback inside your Shopify site