Weebly Integration

Weebly Integration

So your Weebly site has been growing and now you need to make your content easily searchable? Chances are that you're not satisfied with the standard Weebly search and you'd like to replace it with a more powerful, more customizable search engine. The Site Search 360 Weebly app allows you to add a custom search bar to your Weebly store or blog. Here's how to get the Site Search 360 Weebly app running in just a few clicks.

Note: Since our widgets are still running v10 and the latest script version is v13, we recommend that you do the following:

• Install our Weebly app normally;

• Add our search bar and install the script manually, as custom HTML.

How to add Site Search 360 to your Weebly site

1. If you haven’t yet, find the Site Search 360 app in the Weebly App Center and click "Add."

2. Follow the prompts to select the site where you want to have a search function, then click "Connect."

3. Once you’ve connected the Site Search 360 Weebly app, you’ll be redirected to your site Editor and you'll see 2 new widgets under installed apps in your Build tab: 360 Search Box and 360 Search Results.

Style your Site Search 360 search bar

1. Decide where you’d like to display a search field on your site. Select the 360 Search Box element and drag and drop it there.

2. Click on the newly-added search field for configuration options to appear. The default Site Search 360 styling offers a simple grey-bordered box with a universally recognized magnifying-glass icon:

Here you can easily customize the search box element to match your site’s look and feel:

• Change size, colors, placeholders.

• Add a search button with a text label or with an icon, if you'd like.

• Change the border radius to round the corners of your search box.

3. Keep scrolling down the configuration options menu until you get to the Search Suggestions settings. This section allows you to style the drop-down overlay that is triggered after a user starts typing in your search box (after 3 characters by default) and shows a list of instant suggestions matching the search query. Just like Google’s search predictions but only featuring results from your site.

• By default, search suggestions are disabled; hit the toggle to activate them.

• Decide how many suggested results should appear under the search bar and after how many characters.

• Allow our crawler to automatically associate an image (if present) for every search result and display it as a thumbnail.

• Highlight the terms that match the search query 

Here are search suggestions in action on one of the websites using the Site Search 360 Weebly app:

Decide on your search result layout

Search suggestions vs search results

In case you're wondering what the difference between search suggestions and search results is: suggestions provide speedy answers trying to guess the user’s intent whereas search results are generated after the entire search word or phrase is entered, thus providing more precise, fuller answers.

Three layout options

It's time to figure out what exactly happens after your site visitor hits Enter or a search button. There are a few possible action plans:

1. Leave everything as it is: the Site Search 360 Weebly app has already connected your search bar to our search engine. You don't really have to add the 360 Search Results widget. In this case, if your users don't select any of the search suggestions displayed below the search field, full results open in an overlay with our default styling: 

2. If you have added the 360 Search Box to a dedicated search page, it makes sense to embed search results to that same page. So now simply take the 360 Search Results element and place it wherever you want the results to be embedded on the page: 

3. Search results can also "live" separately from the search bar. For example, you have added a search field to your site header and you don't want to show results in an overlay. Obviously, embedding search results, for example, to your homepage and "pushing down" the existing content is not the best strategy. In this case, build a dedicated search result page and specify its URL in the search box configurator: 

Customize your SERPs

The search result configurator helps you easily customize your search result snippets. Here is what you can do within the Site Search 360 Weebly app:

• First, define the maximum number of results to be loaded per search result page view. It defaults to 10 in Google; we recommend setting it to no more than 12-15 entries to ensure a smooth search experience. Nevertheless, you could also instruct the engine to load all available results at once.

• You can show or hide result URLs, highlight matching query terms, and allow the Site Search 360 crawler to automatically pull an image thumbnail from your pages.

  NOTE: the example search snippet that is visible in your site editor is nothing else but a placeholder. All elements (texts, images, and URLs) will be taken from your site once your changes go live.

  TIP: Looking to adjust the images and/or texts? You can! You have full control over what content is indexed and used in search results.

• Next, scroll down to customize or translate the supporting texts such as We found #COUNT# results for your query "#QUERY#". Note: DO NOT translate the variables (#COUNT#, #QUERY#, #CORRECTION#) as they are automatically replaced with relevant content. 

• Finally, depending on your site visitor's Internet connection speed, loading search results can take up to a few seconds. To keep your customers engaged, we show a loading animation: a pulsating circle or a flipping square. Choose your preferred style, animation speed, and color: 

Don't forget to publish your changes to see your site search in action!

Further tweaks

Quick visual configuration tools available in the Site Search 360 Weebly app interface are just a storefront for our full-featured JavaScript plugin that offers even more customization options. When you connect Site Search 360 to your Weebly site, you also get access to our Control Panel (with more crawler and search settings) and Dashboard (with analytics).

To log in to your Control Panel, go to My apps and press "Manage" or use your website's address (e.g. www.myshop.weebly.com) and the password we sent you in the welcome email. Pease check the Spam folder if you can’t find it. You can also reset your password by clicking "Forgot the password?" link on the login page to get a recovery link. It will be sent to your Weebly account's email.

Feel free to reach out for support and consider adding Site Search 360 to your contact list not to miss out on important account notifications and feature updates.