Skip to main content Skip to navigation

Add a live search box to a SiteBuilder page

You can add a search box to the centre or right-hand content to enable visitors to search your website or a section of it. For example, there is a Search help box at the right-hand side of all pages in SiteBuilder help, which returns results from any page under:


Search queries do not return results from the rest of the IT Services website or SiteBuilder section. You see matching results as you enter your query – we refer to this as ‘live search’.

In this article:

Add a search box to a Components Editor page

  1. Open the page in the Components Editor.

  2. Position the cursor where you want to add the search box.

  3. Select Add special features > Search box:

    The 'Add special features' menu in the Components Editor, with the 'Search box' option highlighted

  4. The Search pop-up appears:

    The 'Search' settings pop-up

  5. Enter the path for the topmpost page for your search in the Page to search under box (this is the part of the URL after Results for the search will be restricted to that pages and any pages or files under it.

  6. Optionally, enter a Label to appear within the search box. This is the text that will appear greyed out in the search box before visitors enter their own search terms.

  7. If you leave the Full width search box checkbox selected, the search box will stretch to fill the available horizontal space. If unselected, the box will appear at a standard size.

  8. Select Add search box.

  9. Once it's been added to the page, you can reposition the search box like any other component.

^Back to top

Add a search box to an old visual editor page

  1. Browse to the page where you want to add the search box.
  2. Go to Edit > Edit centre content or Edit right content, as appropriate.
  3. Position your cursor where you want to insert the search box.
  4. Go to Insert a > Search box.
  5. In the Insert search box pop-up window, enter the URL of the uppermost page of the section you want to make searchable. Omit For example, for the whole of the IT Services site, enter:

  6. Optionally, enter a label to appear in the search box – for example, Search IT Services. If you do not specify a label, the default label is Search for.

    Insert search box

  7. Select Insert. The following code is added to your page:

    [livesearch label='Search IT Services']/services/its[/livesearch]
  8. When you have finished editing your page, select Publish.

^Back to top

Related articles


How to report a problem