> ## Documentation Index > Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt > Use this file to discover all available pages before exploring further. # CDN / Tag de script > Adicione o widget de voz do ThunderPhone a qualquer site sem um bundler A versão CDN inclui o React internamente, então você pode usar o widget em sites estáticos, WordPress, Webflow ou qualquer página em que possa adicionar HTML. Não é necessário npm, bundler nem framework. ## URLs da CDN ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` As URLs `latest` são geradas pelo gerador de snippets de incorporação do dashboard. Elas são armazenadas em cache por 5 minutos e recebem automaticamente novas versões estáveis. Os caminhos fixados `/widget/vX.Y.Z/` são imutáveis e armazenados em cache a longo prazo -- se você fixar uma versão, faça-a corresponder à versão npm `@thunderphone/widget` usada no seu desenvolvimento. *** ## Uso básico ```html theme={null}

``` O widget é montado no elemento de destino e renderizado como uma **barra de posição fixa em um canto da viewport** (o padrão é `bottom-right`, controlado pela opção `position`). O elemento de montagem é apenas a raiz do React -- sua localização na página não afeta onde o widget aparece. *** ## Opções de montagem `ThunderPhone.mount()` aceita as mesmas opções do componente React, além da propriedade `element`: | Opção | Tipo | Obrigatório | Padrão | Descrição | | ---------------- | -------------------------------------------------------------- | ----------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `element` | `string \| HTMLElement` | Sim | -- | Seletor CSS (por exemplo, `'#thunderphone'`) ou referência a um elemento DOM. | | `publishableKey` | `string` | Sim | -- | Chave de API publicável (`pk_live_...`). O agente é resolvido automaticamente a partir da configuração de widget da chave. | | `theme` | `'light' \| 'dark'` | Não | `'light'` | Esquema de cores. | | `primaryColor` | `string` | Não | `'#000000'` (claro) / `'#ffffff'` (escuro) | String de cor CSS usada como cor de destaque. | | `title` | `string` | Não | `'Voice assistant'` | Texto exibido na barra do widget. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Não | `'bottom-right'` | Posição fixa na viewport. | | `apiBase` | `string` | Não | `'https://api.thunderphone.com/v1'` | Substituição da URL base da API. | | `language` | `string` | Não | -- | Substituição de idioma por sessão -- um código de idioma ou localidade, como `en`, `es` ou `fr-FR`. Quando não definido, aplica-se o idioma configurado do agente. | | `voice` | `string` | Não | -- | Substituição de voz por sessão -- um nome de voz, como `maria`. Quando não definido, aplica-se a voz configurada do agente. | | `context` | `string` | Não | -- | Contexto factual da página ou do site por sessão, transmitido ao agente. Truncado no servidor para 12.000 caracteres. | | `onConnect` | `() => void` | Não | -- | Chamado quando a sessão de voz é conectada. | | `onDisconnect` | `() => void` | Não | -- | Chamado quando a sessão termina. | | `onError` | `(error) => void` | Não | -- | Chamado em caso de erros. O erro tem os campos `error` (código) e `message`. | | `ringtone` | `boolean \| string` | Não | `false` | Reproduz um toque enquanto conecta. Use `true` para o toque padrão ou uma string de URL para áudio personalizado. | *** ## Limpeza `ThunderPhone.mount()` retorna uma instância do widget com métodos de limpeza: ```html theme={null} ``` Tanto `unmount()` quanto `destroy()` fazem a mesma coisa -- desconectam qualquer sessão de voz ativa e removem o widget do DOM. Use o que fizer mais sentido no seu código. Sempre faça a limpeza do widget ao navegar para outra página em aplicações de página única ou quando o elemento que o contém for removido. Isso garante que as sessões de voz ativas sejam desconectadas corretamente. *** ## Exemplos ### Tema escuro com cor personalizada ```html theme={null}

``` ### Posição personalizada ```html theme={null}

``` ### Com callbacks de eventos ```html theme={null}

``` ### Com toque de chamada ```html theme={null}

``` ### Usando uma referência a um elemento DOM ```html theme={null}

``` ### Integração com WordPress / CMS Adicione isto a um bloco de HTML personalizado ou ao rodapé do seu tema: ```html theme={null} ``` A `

` pode ficar em qualquer lugar -- ela é apenas o ponto de montagem. O widget em si é renderizado como uma sobreposição fixa em um canto da janela de visualização (definido pela opção `position`) e não acompanha o fluxo do conteúdo ao redor. *** ## Solução de problemas Certifique-se de que os arquivos CSS e JS estejam carregados. Verifique o console do navegador em busca de erros de rede. Confirme que o elemento de destino existe no DOM antes de chamar `ThunderPhone.mount()`. O script ainda não foi carregado. Certifique-se de que a tag `