Using href Onclick with Icon element
Hi,
We are implementing Tidio chat on our store and I have been using Icon elements in the website header. They allow for link but Tidio has the following code to call up the chat box:
<a href="javascript:;" onclick="tidioChatApi.display(true);tidioChatApi.open()">Open chat!</a>
Is there a way to use this link and retaining the CSS of the particular icon element?
The chat would be triggered with this Icon element:
Thank you!
Comments
Hi,
There is no option to add this to the Icon element. You would have to recreate the icon box with the Plain Text element.
Best regards
Hi,
Where do I get the code for the iconbox to replicate it? I appreciate your help.
You must replicate it with HTML and/or shortcodes.
https://muffingroup.com/betheme/elements/icon/
Best regards
I got it basically working by using this in the title:
<a href="javascript:;" onclick="tidioChatApi.display(true);tidioChatApi.open()">Küsimus?<br>Vestle meiega</a>
And then I created a specific custom class for it and referred to it under Advanced options of the Iconbox.
The only issue is that now the icon and the link behave separately, it's not working as a single button anymore. Also when you move to the middle of the two texts, it doesn't work as a button anymore either.
I suppose the same issue would happen with shortcodes also... the hover effect would be separate for icon and text...?
You must assign the :hover selector to the main div that contains the content inside it, and then define the color effect for the icon and text.
https://www.w3schools.com/cssref/sel_hover.php
Best regards
Got it working! Thanks!