Build Shopify App that add chat widget to the shop

Extensions
1

Hi. I have a helpdesk system that include chat widget feature. Customers who want to use the chat widget can add my widget embed script before tag on their website.
Now I want to add that widget to customer’s Shopify store, so they can use my helpdesk system via the chat widget. (Similar to how Tidio & Gorgias live chat apps work). I found the scriptTag API that best suite for this problem, but it also warning that the app might not pass App Store review.
Can you give some guidance and advice about how to do this? I’m new to Shopify

2

Hey! It’s great that you’re building a helpdesk system with a chat widget, and adding it to Shopify stores is a fantastic idea. You’re right that the ScriptTag API can be useful here to inject your chat widget into Shopify stores. However, as you mentioned, there are a few considerations to keep in mind to ensure your app passes the Shopify App Store review process.

1. Understanding ScriptTag API:

The ScriptTag API allows you to inject custom JavaScript into a Shopify store’s storefront. This is perfect for adding a chat widget to the customer’s website without them needing to manually update their theme.

The API works by letting you create a script tag that loads your widget script. The script is added to the head or footer of the Shopify store’s pages, which allows your chat widget to appear when the page is loaded.

Here’s a simple example of how it works:

mutation {
  scriptTagCreate(input: {
    event: "onload",
    src: "https://your-chat-widget-url.com/widget.js"
  }) {
    scriptTag {
      id
      src
    }
  }
}

2. Steps to Implement:

Here’s how you can go about adding the chat widget to a customer’s Shopify store:

  1. Set Up App in Shopify Partner Dashboard:
  • Create an app in the Shopify Partner Dashboard.
  • Make sure your app is fully compliant with the Shopify App Store Review Guidelines.
  1. Handle OAuth Authentication:
  • Your app will need to authenticate with the store using OAuth so that the store owner can approve your app and install the widget.
  • You’ll need to request the proper access scopes (e.g., write_script_tags) to install your script tag.
  1. Install the ScriptTag:
  • Once authenticated, use the ScriptTag API to install your widget’s JavaScript onto the store’s storefront.
  • Ensure the script is lightweight and does not interfere with the store’s performance. You could also give merchants the ability to configure the chat widget (e.g., color, position, greeting) via the app’s settings.
  1. Testing and Debugging:
  • Test your app thoroughly in a development store before submitting it to the App Store. Make sure the widget works well across different themes, browsers, and devices.
  • Ensure that the widget only loads on pages where it makes sense, and that it’s easy to disable if the store owner doesn’t want to use it anymore.
  1. App Store Submission:
  • Once everything is set up and tested, you can submit your app to the Shopify App Store.
  • In your app submission, make sure to clearly explain how your app integrates with the Shopify store, how it works, and what it does. Transparency is key here.
  • Provide clear instructions to store owners on how they can disable or uninstall the widget if they want.

3. Alternative Solution: Shopify App Embedding (Admin Apps)

In some cases, you may want to consider using a Shopify Admin App instead of injecting a script directly to the storefront. Admin apps can be installed through Shopify’s app listing and have access to the admin panel, allowing you to create a custom settings page for store owners where they can manage their widget settings. This approach may be more seamless and comply better with Shopify’s review process, especially for providing more transparency and control to store owners.

I think this should help you but i would suggest you to consult a Shopify expert or developer who has experience with the Shopify API and app submissions. They can guide you through the process and make sure your app follows all the necessary guidelines to pass the review.

Good luck with your chat widget integration, and I’m sure it’ll be a useful addition to Shopify stores!

3

Please note the following regarding Script Tags

Your app might not pass App Store review if it uses script tags instead of theme app extensions. All new apps, and apps that integrate with Online Store 2.0 themes, should use theme app extensions, such as app blocks or app embed blocks. Script tags are an alternative you can use with only vintage themes.

Source - scriptTag - GraphQL Admin