Hover on an Element
Trigger a proactive campaign by hovering over an element on a web page.
Available on: Core | Advanced | Pro
Overview
Proactively initiate a conversation whenever someone hovers over an element on the website.
Using this strategically can help you increase order values with cross-sell and upsell, or make the experience better by proactively offering helpful educational flows in areas you know people typically experience confusion.
For example, if someone is hovering over a product, you can recommend accessories that would go with it, or if someone is hovering over the size guide, you can launch a “find my fit” flow to make the experience more engaging.
See it in action
Hover over the text under the Overview section to see how Ada proactively engages with you.
If the campaign got triggered already, simply open the page in a new tab.
How to set it up
Step 1
Follow Ada’s technical Embed documentation to learn how to add Ada to your website.
Attached is the code snippet you need to paste into the <head> tag.
⚠️ Be sure to replace
<YOUR-BOT-HANDLE>with your own bot handle. Your bot handle is your bot’s unique domain name: https://yourbothandle.ada.support/.
📣Click here to learn how to load a bot on a non-US cluster.
<script
id="__ada"
data-handle="<YOUR-BOT-HANDLE>"
src="https://static.ada.support/embed2.js"
></script>Step 2
Follow the instructions on the Advanced Proactive Campaigns page to create a web campaign.
Step 3
Use triggerCampaign to launch a campaign created via the Ada dashboard in step 2:
const trigger = document.getElementById('hoverable-text');
trigger.addEventListener('mouseenter', (e) => {
window.adaEmbed.triggerCampaign('Hover_on_an_element', {
ignoreStatus: false,
ignoreFrequency: false,
})
}, true);Step 4
Create an HTML (or other) element with an ID like hoverable-text.
<p id="hoverable-text">Proactively initiate a conversation whenever someone hovers over an element on the website.</p>Button Example
Here’s an example of what the code would look like for a button:
ℹ️Use Events to measure how often Ada helps your customers succeed by tracking actions on your website, both inside and outside of their conversations with your bot. Follow this guide to learn about creating and tracking events.
<script>
const btn = document.getElementById("hoverable-button");
btn.addEventListener("mouseenter", function(e) {
window.adaEmbed.triggerCampaign("Button Text", {
ignoreStatus: false,
ignoreFrequency: false
})
}, true);
</script>See what Ada can do for you
Get your hands on our award winning platform and start offering VIP experiences for everyone, at scale.
