The Atomic Hosted Page package provides a Web Component, <atomic-hosted-ui>, that integrates a Coveo Hosted Search Page into your web application. This component leverages the Search Interfaces API.

Installation

Via npm

To use the <atomic-hosted-ui> component in your project, install it via npm:

npm install @coveo/atomic-hosted-page

Via CDN

Alternatively, you can use the component directly from the CDN:

<script
  type="module"
  src="https://static.cloud.coveo.com/atomic-hosted-page/v1/atomic-hosted-page/atomic-hosted-page.esm.js"
></script>

Usage

Import and Use in JavaScript

Import the component into your application:

import '@coveo/atomic-hosted-page/dist/components/atomic-hosted-ui/atomic-hosted-ui.js';

Add the component to your HTML and initialize it with the required options:

<atomic-hosted-ui hosted-type="code"></atomic-hosted-ui>

const hostedUI = document.querySelector('atomic-hosted-ui');
hostedUI.initialize({
  pageId: 'your-hosted-page-id',
  organizationId: 'your-organization-id',
  accessToken: 'your-access-token',
});

Using the CDN

Add the component script from the CDN to your HTML:

<script
  type="module"
  src="https://static.cloud.coveo.com/atomic-hosted-page/v1/atomic-hosted-page/atomic-hosted-page.esm.js"
></script>

Include the component in your HTML and initialize it:

<atomic-hosted-ui hosted-type="builder"></atomic-hosted-ui>
<script>
  const hostedUI = document.querySelector('atomic-hosted-ui');
  hostedUI.initialize({
    pageId: 'example-page-id',
    organizationId: 'my-organization-id',
    accessToken: 'your-api-key',
  });
</script>

Properties

`hosted-type`

Type: 'trial' | 'builder' | 'code'
Default: 'code'
Description: Specifies the type of hosted search page to load:
- trial: Loads a trial page.
- builder: Loads a builder page.
- code: Loads a custom code page.

Initialization Options

The initialize() method requires the following options:

Option	Type	Required	Description
`pageId`	string	Yes	The unique identifier of the hosted search page.
`organizationId`	string	Yes	The Coveo organization ID.
`accessToken`	string	Yes	The API key or token used for authorization.
`platformUrl`	string	No	The URL of the Coveo platform. Defaults to `https://platform.cloud.coveo.com`.

Example

Basic Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Atomic Hosted Page Example</title>
    <script
      type="module"
      src="https://static.cloud.coveo.com/atomic-hosted-page/v1/atomic-hosted-page/atomic-hosted-page.esm.js"
    ></script>
  </head>
  <body>
    <atomic-hosted-ui hosted-type="builder"></atomic-hosted-ui>
    <script>
      const hostedUI = document.querySelector('atomic-hosted-ui');
      hostedUI.initialize({
        pageId: 'example-page-id',
        organizationId: 'my-organization-id',
        accessToken: 'your-api-key',
      });
    </script>
  </body>
</html>

License

This project is licensed under the Apache 2.0 License.

FAQs

What is @coveo/atomic-hosted-page?

Is @coveo/atomic-hosted-page popular?

Is @coveo/atomic-hosted-page well maintained?

Package last updated on 24 Sep 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@coveo/atomic-hosted-page

Atomic Hosted Page