Incorporação do Assistente de Docs

Aprenda como incorporar o widget do Assistente de Docs nas suas páginas de documentação.

Visão Geral

O Assistente de Docs é um widget especializado alimentado por IA projetado especificamente para páginas de documentação. Ele fornece ajuda instantânea aos seus usuários respondendo perguntas sobre sua documentação usando um diálogo interativo em tela cheia.

Experimente agora!

Clique no botão abaixo para ver o Assistente de Docs em ação nesta página.

Configuração Básica

Começar com o widget do Assistente de Docs é simples. Apenas siga estes dois passos:

Passo 1: Adicionar o Script

Adicione o script docs-widget.js à sua página HTML com a configuração necessária:

index.html

<script  src="https://widget.companin.tech/docs-widget.js"  data-client-id="YOUR_CLIENT_ID"  data-assistant-id="YOUR_ASSISTANT_ID"  data-config-id="YOUR_CONFIG_ID"  data-locale="en"></script>

Passo 2: Adicionar um Botão de Gatilho

Crie um botão ou elemento que chame o método open() do widget:

index.html

<button onclick="window.CompaninDocsWidget.open()">  Ask Documentation Assistant</button>

Exemplos

Aqui estão alguns exemplos práticos de como integrar o Assistente de Docs:

Exemplo 1: Integração Básica HTML

documentation.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>My Documentation</title></head><body>  <header>    <h1>Product Documentation</h1>    <button onclick="window.CompaninDocsWidget.open()">      Need Help?    </button>  </header>  <main>    <!-- Your documentation content -->  </main>  <script    src="https://widget.companin.tech/docs-widget.js"    data-client-id="your-client-id"    data-assistant-id="your-assistant-id"    data-config-id="your-config-id"    data-locale="en">  </script></body></html>

Exemplo 2: Botão Personalizado com Event Listener

Para mais controle, você pode adicionar event listeners aos seus botões existentes:

script.js

// Wait for the widget to loadwindow.addEventListener('load', () => {  // Add click handler to your custom button  document.getElementById('help-btn').addEventListener('click', () => {    if (window.CompaninDocsWidget) {      window.CompaninDocsWidget.open();    }  });});

Exemplo 3: Integração React/Next.js

Em uma aplicação React ou Next.js:

Documentation.jsx

import React from 'react';export default function Documentation() {  const openDocsAssistant = () => {    if (window.CompaninDocsWidget) {      window.CompaninDocsWidget.open();    }  };  return (    <div>      <h1>API Documentation</h1>      <button        onClick={openDocsAssistant}        className="help-button"      >        Ask AI Assistant      </button>    </div>  );}

Opções de Configuração

O widget do Assistente de Docs aceita vários parâmetros de configuração:

Parâmetros Necessários

data-client-id: Seu identificador único de cliente do dashboard Companin
data-assistant-id: O ID do assistente que você deseja usar
data-config-id: ID de configuração para personalização do widget

Parâmetros Opcionais

data-locale: Código de idioma (padrão: 'en'). Suporta: en, de, es, fr, it, nb, nl, pt, sv
data-dev: Definir como 'true' para modo desenvolvimento (conecta ao localhost:3001)

API JavaScript

Uma vez carregado, o widget expõe uma API global para controle programático:

open()

api.js

window.CompaninDocsWidget.open();

Abre o diálogo do Assistente de Docs em modo tela cheia.

close()

api.js

window.CompaninDocsWidget.close();

Fecha o diálogo do Assistente de Docs e oculta o widget.

Estilo Personalizado

Você pode estilizar seus botões de gatilho como desejar. Aqui está um exemplo de um botão de ajuda flutuante:

styles.css

.my-help-button {  position: fixed;  bottom: 20px;  right: 20px;  padding: 12px 24px;  background: #2563eb;  color: white;  border: none;  border-radius: 8px;  font-weight: 600;  cursor: pointer;  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  transition: all 0.2s;}.my-help-button:hover {  background: #1d4ed8;  transform: translateY(-2px);  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);}

Melhores Práticas

Coloque o botão de gatilho em um local proeminente e facilmente acessível (ex. cabeçalho, botão flutuante)
Use texto de botão claro e orientado para ação como 'Perguntar à IA' ou 'Precisa de ajuda?'
Certifique-se de que o script do widget seja carregado antes de tentar chamar seus métodos API
Mantenha suas credenciais de cliente seguras - nunca as exponha em código do lado cliente

Solução de Problemas

O widget não carrega?

Certifique-se de que o script esteja carregado antes de chamar a API. Você pode verificar se o widget está disponível:

debug.js

window.addEventListener('load', () => {  console.log('Widget loaded:', !!window.CompaninDocsWidget);});

O diálogo não abre?

Verifique se você forneceu todos os parâmetros necessários (client-id, assistant-id, config-id) e que eles estão corretos.

← Voltar Próximo: Incorporação do Assistente de Docs →