Adding a Website Location Search Feature
Wave2 has website search support built right in, so adding a Location Search feature to your website, either in your homepage or across all pages in your header or footer, should be a fairly straighforward task.
Just follow the steps below, and you'll be up and running in no time!
- Find your Website
Location Search Code from the Wave2 Loctor Portal.
- Login to the Portal at https://portal.wave2.io/
- Go to the Integration Dashboard by clicking the big blue Integration button or by selecting it from the main menu.
- From there, click on Website
Location Search Code.
- Select the text input field labeled "Locations Page URL" and type in the full URL, including https:// , for your locations page that will display your Wave2 Locator.
- Click the "Update" button. This will customize the location search code with your URL. It should look like the sample code below.
- Open your website editor or Content Management System and open the appropriate page or component (header or footer, for example) for your website location search feature.
- Be sure you are directly editing the HTML Source of the page, not just using a WYSIWYG-style editing view. You will be pasting both HTML and Javascript into the source of your page. You must edit / paste into the HTML source directly or the code will not work.
- Paste the complete customized Location Search Code into your page HTML, exactly where you would like the searchbox to appear.
- Style the search inputs, or supply your own, and apply appropriate CSS rules to match with the styles of your site.
That's it! After you publish the page, your location search box should be live, and it should take users to your locations page to load up the results of their search in the Wave2 Locator.
- <script type="text/javascript">
- var wave2locatorURL='YOUR FULL LOCATOR PAGE URL';
- document.getElementById('wave2search').onkeydown = function(event){
- var e = event || window.event;
- if(e.keyCode == 13) openSearch();
- }
- function openSearch(){
- var mysearch=document.getElementById('wave2search').value;
- top.location.href=wave2locatorURL + '?search='+mysearch;
- }
- </script>
- <input type="text" id="wave2search" placeholder="Enter City, State or Zip Code"/>
- <input type="button" id="wave2button" value="Search" onClick="openSearch();"/>
Related Articles
Integrating The Wave2 Locator Into Your Website
Wave2 Locator integration is a fairly straightforward process. Just follow these simple steps: Get your Site Integration Tag from the Wave2 Locator Portal. Login to the Portal at https://portal.wave2.io/ Either click the blue Integration button on ...
End-User Frequently Asked Questions (FAQs)
The Wave2 Locator end-user experience is highly intuitive, familiar, and easy to use. However, if you get questions from your cardholders, we want to help you be best prepared to answer those questions. So, we have put together this list of ...
Wave2 Locator Admin Portal - Configuration - Automatic Geolocation / GPS Search and Auto Click Nearest
The Wave2 Locator Admin Portal can configure your locator to automatically perform a "geolocation" or GPS search when the locator is first loaded. You can also set a configuration option that will automatically select the nearest branch or ATM search ...
Using the Wave2 Locator Search Panel, Details Panel, and Results List Panel
In addition to the interactive 3D mapping interface, much of the location data and search results information is shown in the Locations Details panel and the Location List Results Panel. In addition, the user's search request information is entered ...
Wave2 Locator Admin Portal - Configuration - Initial Map Location
The Wave2 Locator Admin Portal allows you to easily configure the initial location of the locator map, which will determine which initial branch and ATM locations will be shown. You can either set a specific geographic starting point using a ...