Skip to main content

Installing AddSearch on Optimizely/EPiServer CMS

This guide shows how to add the AddSearch widget into an Optimizely (formerly EPiServer) CMS website using the default Alloy site template.

Step 1: Obtain your AddSearch Site Key​

  1. Log in to your AddSearch account.
  2. Navigate to Setup > Keys and installation.
  3. Copy the Your Site Key value.

Step 2: Configure the Search Widget​

Use the AddSearch Search Designer tool to customize the widget. Copy the installation script generated.

Paste this script in your website template where you want the search field to appear. Example snippet:

<script>
  // Insert your AddSearch widget script here
</script>

Step 3: Create a Search Widget Block in Optimizely CMS​

To integrate the search widget, create a CMS Block representing the widget with configurable properties. This enables:

  • Reusable widget instances across multiple pages.
  • Different widget configurations per page if needed.

Define the Block Class​

Create a class SearchWidgetBlock extending BlockData with the following properties:

[ContentType(DisplayName = "Search Widget", GUID = "7B1048A4-E521-4B38-A05E-47E88BCE9A26")]
public class SearchWidgetBlock : BlockData
{
    [Display(Order = 1), Required]
    public virtual string AddSearchSiteKey { get; set; }
    
    [Display(Order = 2), Required]
    public virtual string Placeholder { get; set; }

    [Display(Order = 3)]
    public virtual bool ShowSearchSuggestions { get; set; }

    [Display(Order = 4), Required]
    public virtual string SearchSuggestionPosition { get; set; }

    [Display(Order = 5), Required]
    public virtual string DefaultSortBy { get; set; }

    [Display(Order = 6)]
    public virtual bool DisplayDate { get; set; }

    [Display(Order = 7)]
    public virtual bool DisplayMetaDescription { get; set; }

    [Display(Order = 8)]
    public virtual bool DisplayResultImage { get; set; }

    [Display(Order = 9), Required]
    public virtual string LinkTarget { get; set; }

    [Display(Order = 10)]
    public virtual bool HideAddSearchLogo { get; set; }

    [Display(Order = 11), Required]
    public virtual string Direction { get; set; }

    [Display(Order = 12)]
    public virtual bool AnalyticsEnabled { get; set; }

    [Display(Order = 13)]
    public virtual bool AutomaticFilterResultsBySiteLanguage { get; set; }

    public override void SetDefaultValues(ContentType contentType)
    {
        base.SetDefaultValues(contentType);
        AddSearchSiteKey = "150618b356e2412604a6cc625eb0a591"; // Replace with your key
        Placeholder = "Search page";
        SearchSuggestionPosition = "left";
        DefaultSortBy = "relevance";
        DisplayResultImage = true;
        LinkTarget = "_self";
        Direction = "ltr";
    }
}

Note: For security, consider storing your Site Key in app configuration or a secure Key Vault instead of in the block property.

Create the Block View​

Add a Razor view for the block at /Views/Shared/Blocks/SearchWidgetBlock.cshtml:

@model SearchWidgetBlock

<!-- Insert HTML and JavaScript to render the AddSearch widget using Model properties -->

Since this block only maps fields, no controller or block component is required.

Step 4: Integrate the Block into the Site Layout​

Add a Property to Site Page Model​

Edit /Models/Pages/SitePageData.cs and add:

[Display(GroupName = SystemTabNames.Content, Order = 300)]
[AllowedTypes(typeof(SearchWidgetBlock))]
public virtual ContentReference SearchWidgetRef { get; set; }

Add Property to Layout Model​

Edit /Models/ViewModels/LayoutModel.cs:

public SearchWidgetBlock SearchWidget { get; set; }

Modify Page Controller​

In /Controllers/PageControllerBase.cs, resolve the block reference and assign it:

protected readonly Injected<IContentLoader> ContentLoader;

public virtual void ModifyLayout(LayoutModel layoutModel)
{
    if (PageContext.Page is SitePageData page)
    {
        layoutModel.HideHeader = page.HideSiteHeader;
        layoutModel.HideFooter = page.HideSiteFooter;

        if (page.SearchWidgetRef != null &&
            ContentLoader.Service.TryGet(page.SearchWidgetRef, out SearchWidgetBlock instance))
        {
            layoutModel.SearchWidget = instance;
        }
    }
}

Update Website Header View​

Edit /Views/Shared/Header.cshtml to render the search widget block:

@using EPiServer.Web
@model IPageViewModel

@Html.PropertyFor(x => x.Layout.Logotype)

...

@if (Model.Layout.SearchWidget != null)
{
    @Html.PropertyFor(x => x.Layout.SearchWidget)
}

Step 5: Configure the Widget in Edit Mode​

  1. Deploy your website with the above changes.
  2. In edit mode, create and publish an instance of the SearchWidgetBlock in the global blocks catalog.
  3. Configure the block properties as needed.

To link the block to pages:

  1. Navigate to a page (e.g., Start page).
  2. Find the SearchWidgetRef property in the Content tab.
  3. Click Select Block and choose the appropriate search widget block instance.
  4. Publish the page.

Repeat for all pages where the search widget should appear.

Result​

The search widget will appear in the site header on configured pages as shown in the template.

Screenshot review notes​

  • Verify screenshots against current Optimizely CMS UI and update if necessary.

For further customization, refer to the AddSearch documentation and Optimizely CMS developer guides.