@ epilot/ journey- embed- sdk

用于嵌入的流利构建器 SDK 电子驾驶 外出网站的出行. 支持单个可链式API后的两个渲染后端:

• <iframe> ——加强风格隔离,一行多行.
• <epilot-journey> 网络组件 ——在"阴影DOM"中使性能和无障碍性得到更好的提升.

安装

npm install @epilot/journey-embed-sdk
# or
yarn add @epilot/journey-embed-sdk
# or
pnpm add @epilot/journey-embed-sdk

使用量

Bundler (ESM / CJS) (英语)

import { Epilot } from '@epilot/journey-embed-sdk'

const $epilot = new Epilot()

$epilot
  .embed('<your-journey-id>')
  .asWebComponent()
  .mode('inline')
  .append('#embed-target')

反应(有参考文献)

安置方法append, (中文(简体) ), prepend, (中文(简体) ), before, (中文(简体) ), after)接受CSS选择器 或者说 一个直接 HTMLElement。这意味着你可以通过 ref.current 不需要给目标一个身份或阶级.

import { useEffect, useRef } from 'react'
import { Epilot, type Embedding } from '@epilot/journey-embed-sdk'

const $epilot = new Epilot()

export function JourneyEmbed({ journeyId }: { journeyId: string }) {
  const targetRef = useRef<HTMLDivElement | null>(null)
  const embeddingRef = useRef<Embedding | null>(null)

  useEffect(() => {
    if (!targetRef.current) return

    embeddingRef.current = $epilot
      .embed(journeyId)
      .asWebComponent()
      .mode('inline')
      .append(targetRef.current)

    return () => {
      embeddingRef.current?.remove()
      embeddingRef.current = null
    }
  }, [journeyId])

  return <div ref={targetRef} />
}

这个 .remove() 在清理中调用元素并撕下所有的 SDK 听器, 所以组件是安全的挂载, 卸载, 并重挂而不漏出.

通过 CDN 浏览器

同步 :

<script src="https://embed.journey.epilot.io/sdk/bundle.js"></script>
<script>
  $epilot.embed('<your-journey-id>').asWebComponent().append('#embed-target')
</script>

同步——使用 onReady 队列使您的页面可以不阻塞地加载 SDK :

<head>
  <script>
    ;(function (h, o, u, n, d) {
      h = h[d] = h[d] || {
        q: [],
        onReady: function (c) {
          h.q.push(c)
        }
      }
      d = o.createElement(u)
      d.async = 1
      d.src = n
      n = o.getElementsByTagName(u)[0]
      n.parentNode.insertBefore(d, n)
    })(
      window,
      document,
      'script',
      'https://embed.journey.epilot.io/sdk/bundle.js',
      '$epilot'
    )
  </script>
</head>
<body>
  <!-- rest of your page -->
  <script>
    window.$epilot.onReady(function (epilot) {
      epilot.embed('<your-journey-id>').asWebComponent().append('#embed-target')
    })
  </script>
</body>

API 密码

见文件全文 docs.epilot.io/docs/journeys/sdk。 。 。 .

快速引用

配置

new Epilot(options?) 接受:

许可证

麻省理工学院电子驾驶股份有限公司