Create and manage in-product experiences
Create and manage in-product experiences
Coveo In-Product Experience (IPX) is a lightweight and feature-rich Coveo search interface that you can quickly add to any of your websites and software-as-a-service (SaaS) applications.
The compact search interface is customizable and provides users with access to relevant content directly from your web pages.

An IPX search interface automatically records Coveo Usage Analytics (Coveo UA) events. This lets you enhance the relevance of search results in your IPX search interfaces using Coveo Machine Learning (Coveo ML). Usage analytics events also let you generate reports to gain insight on how users are interacting with your IPX interfaces.
Typically, website users access the IPX search interface via a button on the web page. But you can configure your IPX interface so that it appears in a custom element on your website. Both the IPX button and IPX search interface are customizable.
Deploy an IPX interface (Overview)
To successfully deploy an IPX interface, you must meet the following minimum requirements and configuration.
Requirements
A Coveo organization with at least one source (preferably a source with content that’s accessible to everyone).
|
You can configure your IPX search interface to either use the same generic search token to authenticate all users, or a distinct search token for each authenticated user in your IPX search interface. A generic search token is meant to grant access to publicly available content only. This means that IPX users will only have access to indexed content that’s accessible to everyone, while indexed content that’s secured via a repository’s permissions system won’t appear in search results in IPX. However, you can use a distinct search token for each user if some or all of your indexed content is secured via a repository’s permissions system. This means that each authenticated user sees only the secured content that they’re allowed to access. For more information, see Configure search token authentication. |
IPX configuration
Create an IPX interface
This section details how to create a next-gen IPX search interface.
|
Note
The next-gen IPX search interface is Coveo’s latest IPX solution, and it leverages Coveo’s Headless and Atomic libraries. The previous version of the IPX search interface, which was based on the Coveo JavaScript Search Framework, is now referred to as the classic IPX interface. Coveo supports existing classic IPX interfaces, but you can no longer create new IPX search interfaces using the classic configuration. However, you can still edit an existing classic IPX interface. Classic IPX interface configurations appear with a Classic badge on the In-Product Experiences (platform-ca | platform-eu | platform-au) page. ![]() |
-
On the In-Product Experiences (platform-ca | platform-eu | platform-au) page, click Add in-product experience.
-
Enter a descriptive Name for your IPX configuration.
The name that you choose for your IPX configuration will also be used as the search hub value for your IPX interface. The search hub value is the identifier for your IPX interface that’s used for query pipeline routing, usage analytics reporting, and enabling Coveo Machine Learning features. The IPX name and search hub value can’t be modified once the IPX configuration is created.
-
Click Add. The IPX builder opens.
NoteYou may be required to log in to the builder using the credentials you used to log in to the Coveo Administration Console.
|
If you have the Enterprise edition, group this IPX interface and your other implementation resources together in a project. See Manage projects. |
Customize an IPX interface
This section details how to set up and customize an IPX search interface using the IPX builder.
|
Note
To edit a classic IPX interface, see Edit a classic IPX interface. |
From the IPX builder, you can:
Access the IPX builder
The IPX builder lets you customize an IPX search interface configuration. After you create an IPX interface, you can access its configuration settings at any time.
|
Note
To edit a classic IPX interface, see Edit a classic IPX interface. |
-
On the In-Product Experiences (platform-ca | platform-eu | platform-au) page, click the IPX configuration that you want to edit.
-
Click Edit in the Action bar.
You may be required to log in to the builder using the credentials you used to log in to the Coveo Administration Console.
Live builder preview
The IPX builder includes a live preview that automatically updates based on the configuration options.
Besides showing you how your IPX interface looks, the preview is also fully interactive so you can perform actions such as searches, click search results, and open and close the IPX interface. Use the preview to see your IPX interface customizations and functionality in real time.

Manage result templates
Result templates set how individual query results appear in the search interface based on certain conditions. For example, you can display results for PDFs and web pages differently.
You can:
Result templates are evaluated in the order they appear in the Search results display tab. This means that if a query result meets the conditions found in multiple templates, the first applicable template in the list is used.
Create and edit result templates
-
In the IPX builder, select the Search results display tab.
-
Do one of the following:
-
To create a new template, click Add template.
-
Click the result template that you want to edit.
-
-
Specify the template settings:
-
Enter a descriptive Name for your template.
-
Under Usage, set the condition(s) for when to use the template:
-
Click Add condition to add a new condition, or click an existing condition that you want to edit.
-
In the Select a field dropdown menu, select the desired field (for example,
source
). -
In the Select a condition dropdown menu, select the desired operator (for example,
Must match
). -
In the Values field, specify at least one value (for example,
YouTube
). Use a comma-separated list to specify multiple values. -
Click Done to apply your changes.
-
-
Under Colored badge, select what’s displayed for the colored badge above the search result:
-
Select a field to show its data in the badge.
-
Select a color for the badge.
-
-
Under Additional information, set the information to display below the search result:
-
Click Add details to add new information, or click the existing information that you want to edit.
-
Select a field to display the corresponding metadata value.
-
(Optional) To include a label for the selected field, select the Include label checkbox, and then enter a custom label or keep the default field name.
-
Click Done to apply your changes.
Change the order in which the information appears by clicking
to drag a details card to its new location in the list.
-
-
-
Click Done to save the result template.
-
Click Save at the upper-right corner of the builder to save your IPX interface.
Reorder result templates
Result templates are evaluated in the order they appear in the Search results display tab. This means that if a query result meets the conditions found in multiple templates, the first applicable template in the list is used.
|
Note
The Default template can’t be reordered. |
-
In the IPX builder, select the Search results display tab.
-
In the Result templates section, click
on a template card to drag it to its new location in the list.
-
Click Save at the upper-right corner of the builder to save your IPX interface.
Delete a result template
-
In the IPX builder, select the Search results display tab.
-
In the Result templates section, click the result template you want to delete.
-
Click Delete.
-
Click Delete again to confirm the action.
Enable or disable Quick View
The Quick View feature adds a button to each search result.
Clicking the button opens a modal window that contains the body of the search result.
This lets users preview a search result without leaving the current page.

To enable or disable Quick View
-
In the IPX builder, select the Search results display tab.
-
Select or clear the Quick view checkbox to enable or disable the feature in IPX respectively.
Manage facets
When facets are enabled, a Filters button appears at the top of the search interface.

Clicking the Filters button shows the Filters screen where the configured facets appear as filter categories.

|
Note
By default, an IPX configuration includes the Source, Author, and Item Type facets. |
You can:
Enable or disable facets
When facets are enabled, a Filters button appears at the top of the search interface that, when clicked, shows the Filters screen with the configured facets.

|
Important
All existing facets will be permanently deleted if you disable facets and then click Save at the upper-right corner of the builder to save your interface. |
-
In the IPX builder, select the Filtering options tab.
-
To enable or disable all facets, click On or Off respectively in the Facets section.
-
Click Save at the upper-right corner of the builder to save your interface.
Create and edit facets
-
In the IPX builder, select the Filtering options tab.
-
Select the Filtering options tab.
-
Do one of the following:
-
To create a new facet, click Add facet.
-
Click the facet that you want to edit.
-
-
Specify the facet settings:
-
Select the Field to use for the facet (for example,
year
ordocumenttype
). -
Enter the Name to display for the facet in the search interface.
-
Depending on the selected field, a Display section may appear. If so, select whether to display the facet options As checkboxes or As links.
-
-
Click Done to apply your changes.
-
Click Save at the upper-right corner of the builder to save your interface.
Delete a facet
-
In the IPX builder, select the Filtering options tab.
-
Click the facet that you want to delete.
-
Click
.
-
Click
again to confirm.
-
Click Save at the upper-right corner of the builder to save your interface.
Manage tabs
When enabled, tabs appear at the top of the IPX search interface. Each tab shows a subset of items based on the tab configuration.

|
Note
By default, an IPX configuration includes an All tab that can’t be deleted to ensure that all content can be viewed. |
You can:
Enable or disable tabs
|
Important
All existing tabs will be permanently deleted if you disable tabs and then click Save at the upper-right corner of the builder to save your IPX interface. |
-
In the IPX builder, select the Filtering options tab.
-
To enable or disable all tabs, click On or Off respectively in the Facets section.
NoteThe All tab can’t be deleted and is provided by default to ensure that all content can be viewed.
-
Click Save at the upper-right corner of the builder to save your IPX interface.
Create and edit tabs
-
In the IPX builder, select the Filtering options tab.
-
Do one of the following:
-
To create a new tab, click Add tab.
-
Click the tab that you want to edit.
-
-
Specify the tab settings:
-
In the Label field, enter the name that will be displayed on the tab in the search interface.
-
Under Usage:
-
Click Add condition to add a new condition for what will appear in the tab.
-
In the Select a field dropdown menu, select the desired field (for example,
source
). -
In the Select a condition dropdown menu, select the desired operator (for example,
Must match
). -
In the Values field, specify at least one value (for example,
YouTube
).TipTo specify multiple values, use a comma to separate each value.
-
Click Done to apply your changes.
-
-
-
Click Done to save the tab.
-
Click Save at the upper-right corner of the builder to save your IPX interface.
Reorder tabs
|
Note
The All tab can’t be reordered. It always appears first as it displays all content. |
-
In the IPX builder, select the Filtering options tab.
-
In the Tabs section, click
on a tab card to drag it to its new location in the list.
-
Click Save at the upper-right corner of the builder to save your IPX interface.
Delete a tab
-
In the IPX builder, select the Filtering options tab.
-
Click the tab that you want to delete.
NoteThe All tab can’t be deleted.
-
Click Delete.
-
Click Delete again to confirm.
-
Click Save at the upper-right corner of the builder to save your IPX interface.
Set interface colors and text
You can customize the colors and text of your IPX search interface as desired or to match the website or application in which you’ll add the IPX interface.
-
In the IPX builder, select the UI configuration tab.
-
Under Theme, select the Primary, Secondary, and Background colors for the search interface.
-
Under Text:
-
The Font family CSS property sets the prioritized list of supported generic and specific font families for your search interface. By default, the most common fonts are included in the list. The IPX interface will use the first font in the list that’s supported by your website. If required, modify the font family list to match the website or application in which you’ll add the IPX interface.
NoteThe builder’s live preview won’t display a font if it’s not a font that’s currently available in your web browser.
-
Select the Visited link color for the search interface.
-
For Title, select the color for headings and titles in the search interface.
-
-
Click Save at the upper-right corner of the builder to save your IPX interface.
Set IPX placement
Typically, the IPX search interface opens and closes via a button on the web page where the IPX is added. The button and IPX interface appear at the bottom-right of the web page. But you can also configure your IPX interface so that it appears in a custom element on your website. Use the Placement section to set how to display the IPX search interface.
-
In the IPX builder, select the UI configuration tab.
-
Under Placement, select whether to use the IPX button or a custom element:
-
To use the IPX button:
-
Select Open with a button.
-
Select the Button color.
-
In the Label field, enter the text what will appear on the button (for example,
Search
). -
Select the Label color.
-
(Optional) For Button icon, click Upload SVG image to select a custom image to use as the icon in the IPX button when the IPX search interface is closed. By default, a magnifying-glass icon appears.
-
-
To add the IPX search interface in a custom element:
-
Select Show in a custom element.
-
Enter a CSS selector to target the HTML element on your web page where you want your IPX interface to appear.
ExampleEnter
#sidepanel
to target a div element on your website that has an ID ofsidepanel
.
-
-
-
Click Save at the upper-right corner of the builder to save your IPX interface.
Configure a footer
You can add a footer section to the IPX search interface where you can add links and logos.
You can:
Enable or disable a footer
|
Important
All existing footer elements will be permanently deleted if you disable the footer and then click Save at the upper-right corner of the builder to save your IPX interface. |
-
In the IPX builder, select the UI configuration tab.
-
To enable or disable the footer, click On or Off respectively in the Footer section.
-
Click Save at the upper-right corner of the builder to save your IPX interface.
Add or edit footer links and logos
The footer can contain up to three text links and logos in any combination. A logo can also contain a link.
-
In the IPX builder, select the UI configuration tab.
-
If required, in the Footer section, click On to enable the footer.
ImportantAll existing footer elements will be permanently deleted if you disable the footer and then click Save at the upper-right corner of the builder to save your IPX interface.
-
Do one of the following:
-
Click Add a link or logo to add a new footer element, and then click Link or Logo.
-
Click the footer element that you want to edit.
-
-
Specify the settings:
-
For links:
-
Enter a Link URL.
-
Enter the Text to display.
-
-
For logo:
-
Click Upload SVG image to select a custom image to add to the footer.
-
(Optional) Enter a Link URL of the logo.
-
-
-
Click Done to apply your changes.
-
Click Save at the upper-right corner of the builder to save your IPX interface.
Reorder footer links and logos
The footer area is separated into three distinct areas (left, center, right). Footer elements appear on the left, center, or right footer area based on the order that the elements appear in the Footer section. The top-most element appears in the left footer area and the lowest element appears in the right footer area. You can reorder your footer elements as desired.
-
In the IPX builder, select the UI configuration tab.
-
In the Footer section, click
on a footer element card to drag it to its new location in the list.
Enable or disable Smart Snippets
The IPX search interface supports Coveo Machine Learning (Coveo ML) Smart Snippets. Smart Snippets provide users with answers to their queries directly on the results page by displaying a snippet of the most relevant result item. For more information, see About Smart Snippets.
|
Important
Enabling the Smart Snippets option allows Smart Snippets to appear in your IPX search interface, but only if you have a Smart Snippets model that’s associated with your IPX’s main query pipeline. You can enable this option in advance even if you haven’t yet created a Smart Snippets model or associated it with your main query pipeline. However, without a properly configured Smart Snippets model, this option has no effect. To configure a Smart Snippets model for use with IPX, see Configure query pipelines and machine learning. |
To enable or disable Smart Snippets
-
In the IPX builder, select the Settings tab.
-
Select or clear the Smart Snippets checkbox to enable or disable the feature in IPX respectively.
Access the IPX search hub value and loader script
Your IPX interface configuration includes a dedicated search hub value and loader snippet script.
The search hub value is the identifier for your IPX interface that’s used for query pipeline routing and enabling Coveo Machine Learning features. The search hub value is based on the name of your IPX configuration and can’t be modified.
The loader snippet script is required when adding your IPX interface to websites and applications.
To retrieve the search hub value or loader snippet
-
In the IPX builder, select the Settings tab.
-
In the Search hub or Loader snippet section, click
to copy the search hub value or loader script respectively.
Edit a classic IPX interface
This section details how to edit a classic IPX search interface.
|
Note
Classic IPX interface configurations appear with a Classic badge on the In-Product Experiences (platform-ca | platform-eu | platform-au) page. ![]() Although you can edit an existing classic IPX interface, you can no longer create a new IPX search interface using the classic configuration (see Create an IPX interface). |
Edit an IPX classic configuration
-
On the In-Product Experiences (platform-ca | platform-eu | platform-au) page, click the classic IPX configuration that you want to edit, and then click Edit in the Action bar.
-
In the Configuration tab, fill the Basic settings section.
-
Use the Design tab to:
NoteThe Loader snippet is used to add your IPX interface to a website.
-
Use the Content access tab to:
-
Click Save. Saved changes take effect immediately.
Modify the main button
|
Note
This procedure must be executed by a developer who knows how to use the Coveo JavaScript Search Framework. |
-
On your IPX’s configuration page, select the Design tab.
-
In the Main button section, modify the settings as desired, and then click Save.
Advanced main button modification using CSS
For increased flexibility when embedding your IPX in websites and applications, you can use the following elements in the CSS of your web page to modify the style of the IPX button, the button icon, and the button text.
|
Note
Modifying the style attributes of the IPX button using the above CSS elements overrides the corresponding settings in the IPX configuration Design tab. For example, if you set the button color in the Design tab, and then specify a different color in the CSS, your IPX interface uses the color specified in the CSS of the corresponding web page. |
-
coveo-in-app-widget-loader::part(button)
: Modifies the style of the IPX button. -
coveo-in-app-widget-loader::part(button-text)
: Modifies the style of the text that appears in the IPX button. -
coveo-in-app-widget-loader::part(button-icon)
: Modifies the style of the icon that appears in the IPX button.
In the CSS of your web page that includes your IPX interface, add one or more of the above elements within a style
tag and specify the attributes as required using standard CSS rules.
You want the IPX button width to adjust to the button text.
You add the following style
tag to your web page HTML:
<style> coveo-in-app-widget-loader::part(button) { width: inherit; } coveo-in-app-widget-loader::part(button-text) { max-width: unset; } </style>
Deploy IPX in a native component (advanced)
To deploy an IPX interface inside a native component of your website or application instead of attaching it to the default button, you can use the Target selector section.
The Target selector section lets you replace the default IPX button by a custom open/close mechanism integrated within your website or application.
-
On your IPX’s configuration page, select the Design tab.
-
In the Target selector box, enter a CSS selector to the element that should replace the default IPX button (for example,
#myElementId
). -
Click Save.
Modify the search panel (advanced)
You can use the Interface Editor in the Administration Console to customize the search panel.
-
On your IPX’s configuration page, select the Design tab.
-
In the Search Panel section, click Use the interface editor.
-
In the Interface Editor window, select the Code view tab.
-
Modify the search panel markup configuration as desired, and then click Save.
The changes take effect immediately.
Configure content access (advanced)
When embedding your IPX interface in websites and applications, the IPX interface uses the same generic search token to authenticate all users by default. This token is meant to grant access to publicly available content only. You can modify the information to include in the generic search token directly through the Administration Console.
If you would rather use a distinct search token for each authenticated user to provide access only to the secured content they’re allowed to view, you must instead implement advanced search token authentication.
Option 1: Modify the default content access settings
|
Note
Follow this procedure only if you want to modify the information to include in the search token that gets generated by default for all users of an IPX interface. If you want each end user to be able to access the secured content they’re allowed to view in your IPX interface, you must instead implement advanced search token authentication. |
-
On the configuration page for your IPX interface, select the Content access tab.
-
In the Default settings section, modify the settings as desired, and then click Save.
The changes take effect immediately.
Option 2: Implement advanced search token authentication
Implementing advanced search token authentication requires you to add server-side logic to your website or application. Therefore, the actual implementation details will vary from one project to another. This procedure only provides generic guidelines.
|
Note
This procedure must be executed by a developer who is allowed to modify code in the target website or application. |
In summary, you must write server-side code that performs the following actions:
-
Authenticate the user.
-
Call a service exposed through Coveo to request a search token for the authenticated user.
POST https://platform.cloud.coveo.com/rest/search/token HTTP/1.1 Content-Type: application/json Accept: application/json Authorization: Bearer **********-****-****-****-************
{ "userIds": [ { "name": "asmith@example.com", "provider": "Email Security Provider" } ] }
-
In the snippet for the IPX interface to load, inject the
access_token=TOKEN
query parameter into the script URL (whereTOKEN
must be replaced with the actual search token that was generated for the authenticated user).<!-- Coveo In-Product Experience --> <script type="text/javascript" src="https://platform.cloud.coveo.com/rest/organizations/speedbit1a2b34d5e/pages/abc8ccfe-bf50-42e7-a140-475420cbc543/inappwidget/loader?access_token=eyJhbGciOiJIUzI1NiJ9.eyJ2OCI6dHJ1ZSwib3JnYW5pemF0aW9uIjoic3BlZWRiaXQxYTJiMzRkNWUiLCJ1c2VySWRzIjpbeyJwcm92aWRlciI6IkVtYWlsIFNlY3VyaXR5IFByb3ZpZGVyIiwibmFtZSI6ImFzbWl0aEBleGFtcGxlLmNvbSIsInR5cGUiOiJVc2VyIn1dLCJyb2xlcyI6WyJxdWVyeUV4ZWN1dG9yIl0sImV4cCI6MTU3OTgwMzcxNSwiaWF0IjoxNTc5NzE3MzE1fQ.aPFX20a7IdvtKuw89len98fDqMbSo87ER7isSCn-Q90" async ></script> <!-- End Coveo In-Product Experience -->
-
Serve the page, including the snippet in its head.
For more information and examples, see Search token authentication.
Pass custom context (advanced)
|
Note
This procedure must be executed by a developer who knows how to use the Coveo JavaScript Search Framework. |
Passing custom context through an IPX interface helps train Coveo ML models to provide more relevant results to users.
To do so:
-
Ensure that your IPX interface contains a
PipelineContext
component.NoteA
PipelineContext
component is included by default in all IPX interfaces created after March 10th, 2020. For older IPX interfaces, you can add aPipelineContext
component using the Interface Editor. -
Once the
CoveoInProduct
global variable is available, set the custom context as needed by invoking thesetContextValue
and/orsetContext
methods.
You want to collect information from the registered users on the Speedbit Dashboard (i.e., their subscription level, age group, and which Speedbit products they already own) to better provide suggestions as to what they may need next.
Assuming you have implemented the getSubscriptionLevel
, getAgeGroup
, and getOwnedProducts
functions to retrieve the target values, you can use them to pass custom context as follows:
<head>
<!-- ... -->
<!-- Pass custom context to IPX -->
<script>
// Wait for IPX interface to load...
window.addEventListener('load', () => {
CoveoInProduct.setContext({
"subscriptionLevel": getSubscriptionLevel(),
"ageGroup": getAgeGroup(),
"ownedProducts": getOwnedProducts()
});
});
function getSubscriptionLevel() { /* Implementation here... */ }
function getAgeGroup() { /* Implementation here... */ }
function getOwnedProducts() { /* Implementation here... */ }
</script>
<!-- End pass custom context to IPX -->
<!-- ... -->
</head>
Delete an IPX
|
Deleting an IPX search interface is irreversible. |
-
Ensure that the loader snippet for the IPX interface you want to delete is no longer included in any page of your website or application. Otherwise, the console will display a 404 error when the browser attempts to load the script.
-
On the In-Product Experiences (platform-ca | platform-eu | platform-au) page, click the IPX interface you want to delete, and then click Delete in the Action bar.
-
Click Delete to confirm.