Step 2: Add Overlay with Redirect URL
Searches in the overlay panel can optionally redirect the user to a full page, instead of showing them inline.
To add the overlay with a redirect URL, you’ll need:
- Color(s) for the button, overlay panel background and text.
- A panel heading and description.
- Hardcoded prompts.
- Your Search Results Page URL (
domain
) that you want to redirect users to. To set this up, follow the instructions here. - Your
experiencePath
, which will be provided by your Yext Administrator.
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",
experiencePath: "REPLACE_ME_EXPERIENCE_PATH",
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",
url: "REPLACE_ME_SEARCH_RESULTS_URL?query=Locations near me",
target: "_top"
},
{
text: "Do you have gift cards",
url: "REPLACE_ME_SEARCH_RESULTS_URL?query=Do you have gift cards",
target: "_top"
},
{
text: "Operations & COVID-19",
url: "REPLACE_ME_SEARCH_RESULTS_URL}?query=Operations & COVID-19",
target: "_top"
},
{
text: "How do I log in?",
url: "REPLACE_ME_SEARCH_RESULTS_URL}?query=How do I log in?",
target: "_top"
},
]
};
</script>
<!-- end Search Overlay Script Tag -->
<% elem.innerText %>