How to access DOM object? manipulate a chat widget app, Javascript

kiwi8
Shopify Partner
15 0 3

Hi I am using the Live Chat Widget of Brevo. Unfortunately they don't want to give me their source code for private reasons. I want to add/render my FAQ stuff by myself over their widget (when it is opened). That means my javascript file will check if their chat widget is opened (if it is rendered) and then render on top of it my FAQ stuff.

 

So my questions are:

- how do I check if a specific HTML Tag was rendered? in react i am using the DOM object for that (i just check at each render if the html tag of the widget was rendered. and ofc if it was un-rendered/deleted).

- how do i access the DOM object in shopifys environment?

 

https://community.brevo.com/t/can-i-add-kakaotalk-line-somehow-to-my-livechat-an-icon-with-link-is-e... 

 

https://community.brevo.com/t/can-i-add-kakaotalk-line-somehow-to-my-livechat-an-icon-with-link-is-e...

Reply 1 (1)

tim
Shopify Expert
3571 303 1330

You can use mutationObserver to run your code when an element is added to DOM or it's attributes has changed -- this way you can run code it's actually opened.

Most likely you would not be able to modify anything inside the widget because it's in an iframe.

But you should be able to show your own popup on top of their iframe so that visitors will see it first when they hit the Chat button and then can click a button to dismiss your popup and interact with actual chat.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com