Chat attributes can be manipulated to do some cool things like keeping the chat widget hidden by default and to only trigger when a button or text on a page is clicked.
Chat Widget HTML / URL attributes:
gecko-chat-boot → will show the widget on the page
gecko-chat-open → will open up the widget
gecko-chat-close → will close the widget window
gecko-chat-message → will open the widget and send an initial message
gecko-chat-assign → will open the widget and assign an agent
parse_query_string → will allow you to send URL values into chat
1. Widget visibility
Let's learn how you can dynamically hide your live-chat widget from your website.
You can hide your Chat widget in your window settings. This can be done by setting the auto_boot property in the embed script to false:
<script>
window.GeckoChatSettings = {
account_id: 'aUuO4braeFP984a',
auto_boot: false,
};
</script>
<script src="https://embed.geckochat.io"></script>
If the window settings have been placed within the <head> of your site, the Chat widget will be hidden across the entire website.
If the window settings have been placed within the <body> of the site, the Chat widget may only be hidden on the individual page.
This feature can be really useful when trying to declutter your website, especially when there are other website features that appear at the bottom right of the web page.
2. Boot the Gecko Chat widget
Hide the Gecko Chat icon from a single page and have it display only when a button or link has been clicked:
The above can be achieved through the insertion of a gecko-chat-boot attribute to any button or link on an HTML page.
Button example:
<button gecko-chat-boot>Boot live chat</button>
Anchor example:
Click <a href="#" gecko-chat-boot>here</a> to boot live chat.
If a gecko-chat-boot attribute is found on a web page, the widget will automatically be hidden from the student until the button or link has been clicked.
This feature can be really useful when trying to declutter a web page, especially when there is a lot going on that you want students to focus on.
3. Open the Gecko Chat window
Open the Gecko Chat window when a button or link has been clicked:
You can open the Gecko Chat window with an easy to use Gecko Chat HTML attribute. This can be achieved through the insertion of a gecko-chat-open attribute to any button or link on an HTML page.
Button example:
<button gecko-chat-open>Start live chat</button>
Anchor example:
Click <a href="#" gecko-chat-open>here</a> to start a live chat.
*Replace '#' with your actual URL.
URL parameter example:
https://https://www.example.com/admissions/apply-now?gecko-chat-open
*Replace 'https://www.example.com/admissions/apply-now' with your actual URL.
Upon clicking the button or link with the gecko-chat-open attribute, the widget will load and open the Chat window.
This feature is ideally paired with either gecko-chat-boot or auto_boot.
4. Close the chat window
Close the Chat window when a button or link has been clicked.
You can close the Chat window with an easy to use Chat HTML attribute. This can be achieved through the insertion of a gecko-chat-close attribute to any button or link on an HTML page.
Button example:
<button gecko-chat-close>Close live chat</button>
Anchor example:
Click <a href="#" gecko-chat-close>here</a> to start close live chat.
Upon clicking the button or link with the gecko-chat-close attribute, the Gecko Chat widget will close the Gecko Chat window if it is open.
If the Gecko Chat widget has been hidden using gecko-chat-boot or auto_boot then clicking a button or link with the gecko-chat-close attribute will cause the Chat icon to appear with the chat window closed.
This feature can be useful when you want students to navigate to a new page and concentrate on the task at hand - such as filling in a form.
5. Send message
Send a message to the Chat window when a button or link has been clicked:
You can send a message to the Gecko Chat window with an easy to use customisable Gecko Chat HTML attribute. This can be achieved through the insertion of a gecko-chat-message attribute to any button or link on an HTML page.
Button example:
<button gecko-chat-message="Can I book an open day please">Book an open day</button>
Anchor example:
Click <a href="#" gecko-chat-message="Can I book an open day please">here</a> to book an open day.
The gecko-chat-message attribute will send any desired message to the Chat window. You can tailor the message to suit your needs through editing the ="the message” after the gecko-chat-message attribute.
Upon clicking the button or link with the gecko-chat-message attribute, the Gecko Chat widget will boot and open the Gecko Chat window if it is hidden or closed.
This feature can be useful when you want students to start a conversation.
The attribute is especially useful when you want to send students straight into a conversation with your ChatBot. A likely scenario could be to help students book themselves in for an Open Day event.
6. Assign a conversation on click
Assign the Chat conversation to an agent or team when a button or link has been clicked:
You can assign a Gecko Chat conversation to any agent or team with an easy to use customisable Gecko Chat HTML attribute. This can be achieved through the insertion of a gecko-chat-assign attribute to any button or link on an HTML page.
Button example:
<button gecko-chat-assign="A123B456-CD7E-89F1-G234-5HI678912J34">Speak to Steven</button>
Anchor example:
Click <a href="#" gecko-chat-assign="A123B456-CD7E-89F1-G234-5HI678912J34">here</a> to speak to Steven
The gecko-chat-assign attribute will assign any desired agent or team to the Gecko Chat window. You choose which agent or team to assign through editing the ="agent-uuid” after the gecko-chat-assign attribute.
The Agent UUID can be found on the Agent’s profile and the Team UUID can be found on the Team’s profile.
Upon clicking the button or link with the gecko-chat-assign attribute, the Gecko Chat widget will boot and open the Gecko Chat window if it is hidden or closed.
Pair this attribute with the gecko-chat-message attribute to assign an Agent or Team member and automatically send a message to start a conversation.
This feature could be useful if you want students to start a conversation with an agent to find out about a particular course. Or perhaps direct a student to start a conversation with your accommodation team.
7. Assign a conversation from URL
Assign the conversation to an agent or team when a link has been clicked sending a user to another page.
You can assign a conversation to any agent or team with an easy to use customisable Chat URL parameter. This can be achieved through the insertion of a gecko-chat-assign parameter to any link that leads the user to a new page.
Click <a href="/?gecko-chat-assign=A123B456-CD7E-89F1-G234-5HI678912J34" >here</a> to speak to Stephanie
The gecko-chat-assign URL parameter will assign any desired agent or team to the Chat window. You choose which agent or team to assign through editing the =agent-uuid after the gecko-chat-assign attribute within the <href> attribute on any link.
The Agent UUID can be found on the Agent’s profile and the Team UUID can be found on the Team’s profile.
Upon clicking the link with the gecko-chat-assign parameter, the user will be redirected to a new page and Gecko Chat widget will boot and open the Gecko Chat window if it is hidden or closed.
<a href="insert-new-page-url/?gecko-chat-assign=A123B456-CD7E-89F1-G234-5HI678912J34" >Your Page Title</a>
If the user is not being redirect to a new page we suggest using the the gecko-chat-assign attribute as this will not require the page to be refreshed.
You can also include any of your own URL parameters alongside gecko-chat-assign
<a href="insert-new-page-url/?gecko-chat-assign=A123B456-CD7E-89F1-G234-5HI678912J34&your-parameter=value" >Your Page Title</a>
Use this method if the student is on a search page that uses other URL parameters.
This feature could be useful if you want to send students to a new page from either your website or email and automatically start a conversation with a given agent or team.
Please note that this parameter cannot be paired with the gecko-chat-message attribute. Please use the gecko-chat-assign attribute described above to achieve this effect.
***
Any questions? Feel free to start a live chat with a member of our support team or explore the rest of our academy at your leisure.