Insert custom components in an existing search interface

Warning
Legacy feature

This article pertains to the Coveo Hive framework which is now in maintenance mode.

Choose one of Coveo’s more modern, lightweight, and responsive libraries for any future search interface development. See the search interface Implementation guide for more details.

There are two ways to insert your own components into an existing search interface:

Inserting a Placeholder Section

The Placeholder Section rendering allows adding a placeholder in the interface. This placeholder can be an existing one that already has been configured or a custom placeholder.

Many of the placeholders in the Coveo Modular Frame already let you add the Placeholder Section rendering.

  1. Select the Main Content section, and click Add To Here

  2. Select the Placeholder Section component.

    Screenshot of the Sitecore Select a Rendering window with the Placeholder Section rendering selected | Coveo
  3. Select or create a new data source. If you select an existing data source that’s already configured, jump to step 7.

  4. You should now have a non-configured Placeholder Section component.

    Screenshot of the Sitecore Experience Editor showing the Placeholder Section component with a message prompting user to edit its component properties | Coveo
  5. Click the component, and click Edit Coveo Data Source.

  6. Enter the placeholder key that you want to insert.

    Screenshot showing the data source Placeholder Key field value set to My Placeholder | Coveo
  7. You should now have an empty placeholder. If you don’t see it, ensure that you have properly configured the Placeholder Settings for the key entered in the data source.

    Screenshot of Sitecore Experience Editor showing the empty placeholder of the Placeholder Section component | Coveo

Patching the allowed controls of an existing placeholder

This item allows you to add your own Allowed Controls to a placeholder without running the risk getting your placeholder overwritten during an upgrade.

You should always use this method to patch the placeholders provided by Coveo for Sitecore.

  1. In the Content Editor, in the location of your choice.

    1. For example, create a folder named "My Placeholder Extenders" under the path Sitecore > Layout> Placeholder Settings..

      Screenshot of the Sitecore content tree showing a My Placeholder Extenders folder in the Placeholder Settings folder | Coveo
  2. Right-click the folder and choose Insert > Insert From Template

  3. In the templates, navigate to Coveo Hive > Structure and choose Placeholder Extender.

    1. Choose a name that identifies what you’re extending.

      Screenshot of the Sitecore Insert from Template window showing the user setting the value of the new Placeholder Extender item | Coveo
  4. In your newly created item, select the Placeholder Setting property.

  5. Choose the placeholder that you want to extend.

    Screenshot of the item Placeholder setting dropdown with the Placeholder Settings Coveo Coveo Hive Facets Facets item selected
  6. In the Allowed Controls property, click Edit.

  7. Choose the controls that you want to add and click OK.

    1. In this example, we add Coveo Pager to the coveo-facets placeholder. This allows us to add the Pager component where the Facets are usually located.

      Screenshot of the Sitecore Select Items window with the Coveo Pager item added to the Selected pane | Coveo
  8. Save the item.

  9. You should now be able to add the component from the extender to the provided placeholder.

    Screenshot of the Sitecore Select a Rendering window showing the Coveo Pager component selected | Coveo