동일한 페이지에서 격리된 컨테이너, 이벤트 및 인스턴스 API로 여러 위젯 인스턴스를 실행합니다. 충돌 없이 서로 다른 구성을 나란히 로드하기 위해 고유한 인스턴스 ID를 사용합니다(예: 판매 + 지원).
일부 애플리케이션은 한 번에 하나 이상의 위젯이 필요합니다. 다중 브랜드 전자상거래 사이트는 서로 다른 제품 카테고리에 대한 위젯을 표시할 수 있으며, 지원 플랫폼은 판매 및 기술 지원을 위해 별도의 위젯을 실행할 수 있습니다. 다중 위젯 지원이 이제 가능합니다 인스턴스 기반 임베딩 및 인스턴스별 API를 통해.
data-instance-id를 부여합니다.data-config-id 값을 사용합니다.companin-widget-container-<instanceId> / companin-docs-widget-container-<instanceId>)에 렌더링됩니다.이렇게 하면 여러 독립적인 위젯이 하나의 페이지에서 서로를 덮어쓰지 않고 공존할 수 있습니다.
모든 위젯 인스턴스에 대해 고유한 스크립트 ID 및 인스턴스 ID를 사용하십시오:
<script
id="companin-widget-script-sales"
src="https://widget.companin.tech/widget.js"
data-client-id="..."
data-agent-id="..."
data-config-id="sales-config-id"
data-instance-id="sales-widget"
></script>
<script
id="companin-widget-script-support"
src="https://widget.companin.tech/widget.js"
data-client-id="..."
data-agent-id="..."
data-config-id="support-config-id"
data-instance-id="support-widget"
></script>
레지스트리 API를 사용하여 특정 인스턴스를 타겟팅하십시오:
const sales = window.CompaninWidgets?.get('sales-widget');
const support = window.CompaninWidgets?.get('support-widget');
sales?.sendMessage('현재 제공 사항 보여줘');
support?.sendMessage('기술 지원이 필요해');
window.CompaninWidgets?.list();
window.CompaninWidgets?.destroy('support-widget');
문서 위젯 인스턴스는 병렬 레지스트리를 사용합니다:
window.CompaninDocsWidgets.get(id)window.CompaninDocsWidgets.list()window.CompaninDocsWidgets.destroy(id)기존 통합은 계속 작동합니다. window.CompaninWidget 및 window.CompaninDocsWidget는 여전히 가장 최근에 초기화된 인스턴스를 가리키며, 레지스트리 API는 결정론적 다중 인스턴스 타겟팅을 제공합니다.