原子主机页面

这个 原子主机页面 软件包提供了一个 Web 组件, <atomic-hosted-ui>,将 Coveo 主机搜索页面整合到您的网络应用程序中。 这个部分利用 搜索接口 API。 。 。 .

安装

通过 npm

用来使用 <atomic-hosted-ui> 组件,通过 npm 安装:

npm install @coveo/atomic-hosted-page

维娅 CDN

或者,您可以从CDN直接使用组件:

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

使用量

在 JavaScript 中导入和使用

1. 将组件导入您的应用程序 :

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

2. 将组件添加到您的 HTML 中并初始化, 并使用所需的选项 :

   <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',
   });
   

使用 CDN 软件

1. 从 CDN 添加组件脚本到您的 HTML :

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

2. 在您的 HTML 中包含组件并初始化 :

   <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>
   

属性

hosted-type

• 类型 : 'trial' | 'builder' | 'code'
• 默认 : 'code'
• 说明 : 指定要装入的主机搜索页面的类型 :
  • trial:装入试页.
  • builder:装入构建器页面.
  • code:装入自定义代码页.

初始化选项

这个 initialize() 方法需要以下选项:

示例

基本示例

<!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>

许可证

本项目根据以下规定获得许可证: Apache 2.0 许可证。 。 。 .