How can I successfully integrate my Voiceflow AI chatbot into my online store?

jrlayne · ‎12-01-2023

Hello, I'm trying to integrate my voiceflow AI chatbot to my shopify store. Voiceflow gives ta code snippet that needs to be pasted inside the <body> tags in some liquid file (I've used theme.liquid and header.liquid). However, the chatbot is not showing up on the store. I get it working on another site which is hosted on Squarespace. What might be the problem? I've tried disabling all the shopify apps I have on the store but it did not solve the problem. I get no errors related to this. The chatbot even shows up in the element when I inspect the page. Just not on the site itself.

Taknify · ‎12-01-2023

No. It was hidden on my as well it was because the chat widget has a css property of display: none. You have to either delete that piece or have it be display: block instead.
You can see the widget by right-clicking -> inspect -> search for voice flow and delete that property or change it to block (Update the same in the backend).
If I answered your question, don't forget to like and accept the solution.
Thanks,
Taknify

Need to tweak your store a bit? Come and visit us at Taknify or send me message.

View solution in original post

Taknify · ‎12-01-2023

I think the placement of the code is not working or the chat widget is having some issues not loading. It is really hard to guess without looking at your website. Can you share us your website link please?

Need to tweak your store a bit? Come and visit us at Taknify or send me message.

jrlayne · ‎12-01-2023

Store is at https://ehorisontti.com/. The chat code snippet does not have any problems because it works on some sites.

Taknify · ‎12-01-2023

Is this the chat bot you were expecting?

Need to tweak your store a bit? Come and visit us at Taknify or send me message.

jrlayne · ‎12-01-2023

Yes! How did you get it? Maybe the problem is in my own browser.

Taknify · ‎12-01-2023

No. It was hidden on my as well it was because the chat widget has a css property of display: none. You have to either delete that piece or have it be display: block instead.
You can see the widget by right-clicking -> inspect -> search for voice flow and delete that property or change it to block (Update the same in the backend).
If I answered your question, don't forget to like and accept the solution.
Thanks,
Taknify

Need to tweak your store a bit? Come and visit us at Taknify or send me message.

Arya_mlz · ‎12-18-2023

Hello @Taknify, I'm currently experiencing a challenge with my Shopify theme. I've successfully resolved an issue with my chatbot visibility by replacing "display: none;" with "display: block;" in the browser's developer tools.

To ensure a permanent solution, I think I need to apply this change to my Shopify theme's CSS. However, I'm having difficulty locating the specific CSS related to the chatbot in my "base.css" file, as there are numerous similar characters and styles.

I would be happy if you could assist me with it.

Taknify · ‎12-18-2023

Do you mind sharing me your store url and if you have a code, can you share that as well?
Once I get access to the store, I can add you that code and show you which file I did that on.
Let me know if you have questions on giving collaborator access to the store.

Need to tweak your store a bit? Come and visit us at Taknify or send me message.

AiRockers · ‎06-07-2024

Just add the below snippet just above the webchat snippet within the body tags.

<style>

#voiceflow-chat {

display: block !important;

}

</style>

Petolescu · ‎06-07-2024

Hello, I have the same problem, and I still don't understand how to eliminate that.

How can I successfully integrate my Voiceflow AI chatbot into my online store?

How can I successfully integrate my Voiceflow AI chatbot into my online store?

Community Blog Articles