Add Search To Your Site
Updated over a week ago

PeopleVine provides you with an out of the box search page that automatically searches your content, products, events and business locations to display to your users.

We've made adding a search screen to your site easier than ever by leveraging our out-of-the-box javascript function.

To enable the search screen on your site, follow these simple steps:

1) Create a search button that you would like to use as the trigger for the search screen. The search button can be any element type you choose. For this example we'll be using an <a> element.

Click to Search

2) Add a custom ID and Class to your search button. Take this time to add your own custom styles to allow it stand out to your users.

Click to Search

3) Call the function and pass your buttons ID. This will add a trigger to your custom button and inject the search screens HTML and CSS to your page automatically. We recommend adding this below your websites footer to ensure all content is fully loaded before the javascript runs. This is located in the PeopleVine Control Panel > Engage > Page Layouts

If you are using jQuery on your site, you can leverage the document.ready() method to ensure the search screen is appended when the page is loaded.

$(document).ready(function(){ // Pass the search button ID siteSearch('startSearch');});

For a pure javascript approach, you can utilize the jQuery equivalent of document.ready()

document.addEventListener("DOMContentLoaded", function(event) {  // Pass the search button ID siteSearch('startSearch');

That's it, you should now have an easy to use search screen on your website.

Alternatively you can route users to /search?search_for=Search Term.

Did this answer your question?