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

Solved

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

ThePilsen
Shopify Partner
10 0 0

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!

Accepted Solutions (2)
Rishihuptech
Shopify Partner
672 124 134

This is an 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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Rishihuptech
Shopify Partner
672 124 134

This is an 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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 10 (10)

Rishihuptech
Shopify Partner
672 124 134

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.

Screenshot (36).png

 

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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
ThePilsen
Shopify Partner
10 0 0

 

Hello @Rishihuptech,

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: 
    extension.png














    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

Rishihuptech
Shopify Partner
672 124 134

This is an 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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
ThePilsen
Shopify Partner
10 0 0

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

ThePilsen
Shopify Partner
10 0 0

 

Hi @Rishihuptech 

 

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

 

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?

 

Rishihuptech
Shopify Partner
672 124 134

This is an 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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
ThePilsen
Shopify Partner
10 0 0

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
Shopify Partner
2 0 0

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

Rishihuptech
Shopify Partner
672 124 134

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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Lexaure
Shopify Partner
2 0 0

Thank you for your prompt response, @Rishihuptech. 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 ?