Best Way for Shopify App Developers to Install JavaScript Chatbot Code on All Store Pages

[ThePilsen]

Hi fellow developers,

I'm developing a Shopify public app and need to install JavaScript code for a chatbot on every page of a store (e.g., index and product pages). This chatbot allows visitors to track orders and ask questions about products.

I was planning to use assets.json via the API, but realized the write_themes access scope is now restricted. To minimize work for the merchant, I need to insert <script>{code}</script> into something like layout/theme.liquid.

Should I implement this using theme extensions or app embeds? What’s the best approach to achieve this with minimal merchant effort?

Thanks for your insights!

[Huptech-Web · Accepted solution]

Hello @ThePilsen 

1. Index Page Inclusion: for the home page you can add an index as a template then your code works on the home page.I have added an index and some other templates in the schema you can check the code below.

{% schema %}
  {
    "name": "App Name",
    "target": "body",
    "enabled_on": {
      "templates": ["index","article", "page","product","collection","blog","cart","404","search","policy","gift_card","list-collections","password","customers/account"]
      // Add a template name where you want to add your JS code. you can add all template names  so you js code work on all pages// Add a template name where you want to add your JS code. you can add all template names  so you js code work on all pages
    },
    "settings": []
  }
{% endschema %}​

• Schema Code Placement: You can add your scheme code in the blocks folder if the blocks folder is not there then create a blocks folder. and chat.liquid file into the blocks folder with schema code.
• Schema Code Placement: The screen depicted in the image is the extension screen where you can update your extension information. When you run npm run deploy, the Shopify CLI automatically makes all changes to your extension. Therefore, you don't need to take care of this. The CLI handles it for us

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

[Huptech-Web]

Hello @ThePilsen 

To add JavaScript code to all pages in a Shopify app, utilizing App Embeds is the optimal approach. The merchant needs to enable your app in the theme customizer, which will ensure your code runs on all pages. To achieve this, use the schema code provided below and add it to the page template where you want to include the JavaScript code

{% schema %}
  {
    "name": "App Name",
    "target": "body",
    "enabled_on": {
      "templates": ["article", "page","product","collection"] 
// Add a template name where you want to add your JS code. you can add all template names  so you js code work on all pages
    },
    "settings": []
  }
{% endschema %}

merchant simply enables your app from the theme customizer.

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

[ThePilsen]

Hello @Huptech-Web,

Thank you for your quick response and the helpful insight on using App Embeds in Shopify! I appreciate the guidance on how to implement JavaScript code across various page templates using the schema code you provided.

I have a couple of follow-up questions to ensure I'm on the right track:

1. Index Page Inclusion: I also want the JavaScript code to appear on the main index page of the store, not just on product, collection, page, or article templates. Is there a way to include the index page in the templates list, or a different method to ensure coverage of the home page?

2. Schema Code Placement: Currently, my setup only includes a chat.liquid file in the snippets folder. Could you advise on which specific file or folder I should place the schema code into?
   
   

3. Shopify CLI and Extension Activation: When running shopify app dev, I'm directed to activate the extension in the app settings, but the provided link only shows a message to "Make changes with the Shopify CLI" without an activation button. Here’s what it shows: 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   Could you help clarify the steps required to activate the extension from this point?

Additionally, here’s the content of my shopify.extension.toml file:

name = "boarcode"

type = "theme"

version = "1.0.0"

[config]

location = "theme"

[[blocks]]

type = "snippet"

name = "chat_widget"

source = "snippets/chat.liquid"

Is there anything in this configuration that I should adjust to better integrate the extension?

Thanks again for your support!

Best regards,
ThePilsen

[Huptech-Web · Accepted solution]

Hello @ThePilsen 

1. Index Page Inclusion: for the home page you can add an index as a template then your code works on the home page.I have added an index and some other templates in the schema you can check the code below.

{% schema %}
  {
    "name": "App Name",
    "target": "body",
    "enabled_on": {
      "templates": ["index","article", "page","product","collection","blog","cart","404","search","policy","gift_card","list-collections","password","customers/account"]
      // Add a template name where you want to add your JS code. you can add all template names  so you js code work on all pages// Add a template name where you want to add your JS code. you can add all template names  so you js code work on all pages
    },
    "settings": []
  }
{% endschema %}​

• Schema Code Placement: You can add your scheme code in the blocks folder if the blocks folder is not there then create a blocks folder. and chat.liquid file into the blocks folder with schema code.
• Schema Code Placement: The screen depicted in the image is the extension screen where you can update your extension information. When you run npm run deploy, the Shopify CLI automatically makes all changes to your extension. Therefore, you don't need to take care of this. The CLI handles it for us

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

[ThePilsen]

Thank you for your detailed response. I've selected your solution as it addresses my needs effectively!

[ThePilsen]

Hi @Huptech-Web 

I found out how to use deep links to open the list of app embeds after a user follows the link:

https://<myshop>.myshopify.com/admin/themes/131438837848/editor?context=apps&appEmbed=0668dc6c-a2a3-...

However, I wonder how to make one of these embed apps preselected. I see some people add something after the ID, like 0668dc6c-a2a3-4a5c-9d57-75ba0a1b1089/<something>, but I don't know what to add there.

Any advice?

[Huptech-Web · Accepted solution]

Hello @ThePilsen 

You can use the URL below to redirect to the Shopify theme customizer with your app preselected. 

https://admin.shopify.com/store/${shopName}/themes/${themeEditorId}/editorcontext=apps&template=index&activateAppId=${EXTENSION_ID}/${EXTENSION_NAME}

In this link:

themeEditorId is obtained via the admin REST API theme.json.
EXTENSION_ID is Enter Your theme app extension id.
EXTENSION_NAME is your theme app extension name.

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

[ThePilsen]

In fact, it doesn't work if I use _extension name_ at the end of the URL, but worked just fine when I replaced ${EXTENSION_NAME} with "chat". In my case, the extension name is "codeboar", and 'chat' is the name of the file in the blocks folder (chat.liquid).

[Lexaure]

Hey, thanks for your solution. Do you also know how to make it work on the checkout page? Thank you 

[Huptech-Web]

Hello @Lexaure 

The theme extension does not function on the checkout page. Shopify will deprecate the checkout.liquid file on August 13, 2024 (Checkout Liquid). so the best way To address this issue, you need to create a Checkout UI extension. Please refer to the URL below for more information on the Checkout UI extension.

Checkout UI exteion doc.

https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/ 

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

[Lexaure]

Thank you for your prompt response, @Huptech-Web. Can we create a new script element to insert our SDK within the checkout UI extension. We need to use `document.createElement`. Is this something we can do, or is the browser API limited in the context of checkout UI ?