how to add chat bubble feature to my app so users can click on it from any page in my embedded app

[dom003]

I just launched my first app and I am trying to make it more robust and polished. I notice that many great apps have a support/chat bubble that opens what is apparently a 3rd party chat tool that appears on each page of the [embedded] app. 

I'm wondering what people are using to do that..? 

Can I drop a snippet of code from any 3rd party chat application I find online? Is there a recommended chat service to use that make it easy to add on shopify specifically? Are there CORs/auth considerations to make a 3rd party widget work on an embedded app? I'm trying to find out more.

For example: 

One app I came across used a chat widget that had company branding as: "Freshworks freshdesk support widget", another app had crisp.chat. Does anyone know if these are good, or if there's better, simpler alternatives to these? 

Any direction from someone who's added a Support widget to their Shopify app would be GREATLY appreciated. 

Thanks,

[Sajat]

Hi @dom003 

Welcome to Shopify Community.

My personal opinion, if budget is not a constrain for you, then go to Intercom.  Very clean UI, intuitive, and overall pleasing for both you and your clients.

If you are looking for free options to get started with tawk.to will also do the job.

We had used Crisp chat previously, and it is also good but I recommend Intercom if you are going for paid option.

Thank you,

Sajat

-------------------------------------------------------------------------------------------
If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.

[Bundler-Manuel]

Hey there @dom003 I did some quick research for you and it looks like someone was able to find a solution to a similar predicament a while back. Check through the replies here https://community.shopify.com/c/shopify-apps/how-to-build-a-public-app-that-shows-a-chat-bubble-on-u... and let me know if that procedure works for you.

[dom003]

Hey @Bundler-Manuel thanks for the reply. That thread you referenced was a little brief and merely says to implement it via an app extention -- but doesn't indicate which type. 

based on Shopify's list of app extensions I don't really see any that would suit this specific purpose (adding the modal in the app pages inside the admin). 

I'd expect to be able to add the Chat Widget code snippet directly inside the Main App's index file. I was just hoping for confirmation this is correct. 

[Huptech-Web]

Hello @dom003 

I recommend considering tawk.to for your chat solution. It's a free and widely adopted tool, especially among Shopify apps. I've integrated it into my app and found it user-friendly for merchants, as well as advantageous for our team. Therefore, I suggest using tawk.to as a reliable chat option.

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.
(GD)

[dom003]

Hey @Huptech-Web thanks for the reply! I'll check out your suggestions regarding providers to find the best option for me. A free tier to start would be nice since I don't have a ton of installs on my app quite yet. That said, I'm certainly open to paid services if the UI is excellent and the price is relatively cheap. 

Also, can you please comment on how to implement the widget once I've selected a provider? Can I simply paste their code into my App's app.index.jsx file to get it to start appearing on every page inside the admin? Or are there token/cors considerations to overcome too? 

[Huptech-Web]

Hey @dom003 

As I mentioned, tawk.to is indeed free, and you can customize its UI according to your preferences by adjusting the settings.

To implement it, tawk.to will provide you with a script that you can append to the bottom of the body tag in your `index.html` file. After that, it will start appearing on your frontend.

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.
(GD)

[dom003]

hey @Huptech-Web thanks for the additional insights. I dont mind marking up your response as the helpful answer but I have one remaining question/further clarification: 

In your last message you said to put the code in my index.html file, but most modern Shopify apps use the React/Remix app template, which has no html files. Which file should the script actually be added in....app. jsx, root.jsx, or shopify.server.js, ? And are there any keys to manage or changes needed in server files? 

Thanks.