Step 1: Add Overlay with Results Inline
To add the overlay to your page, you’ll need:
- Color(s) for the button, overlay panel background and text.
- A panel heading and description.
- Hardcoded prompts.
- Your
domain
. This will be the Production URL listed at the top of the Deploys screen for your site.
The above information should be included in the Search Overlay Script Tag, like this:
<html>
<head>
<!-- head stuff here -->
</head>
<body>
<!-- other body stuff here -->
<!-- begin Search Overlay Script Tag -->
<script type="text/javascript" async src="REPLACE_ME_SEARCH_RESULTS_URL/overlay.js"></script>
<script>
window.YxtAnswersOverlaySettings = {
domain: "REPLACE_ME_SEARCH_RESULTS_URL",
button: {
alignment: 'right',
color: { //update with your desired colors
background: '#808080',
text: '#FFFFFF'
},
},
panel: {
header: "We're here to help.", //update with your desired header
subtitle: "Find frequently asked questions and resources.", //update with your desired subtitle
color: { //update with your desired colors
background: '#808080',
text: '#FFFFFF'
},
},
prompts: [ //update with your desired prompts
{ text: "Locations near me" },
{ text: "Do you have gift cards?" },
{ text: "Operations & COVID-19" },
{ text: "How do I log in?" }
]
};
</script>
<!-- end Search Overlay Script Tag -->
</body>
</html>
Feedback
<% elem.innerText %>