Incorporar em Websites

5 min

Os aplicativos do Paragraph podem ser incorporados em websites usando um iframe. Isso permite que você integre seu aplicativo Paragraph no seu site, blog ou qualquer outra página da web.

Ao usar o Botão de Bolha do Chatbot do Paragraph incorporado em seu site, você pode personalizar o estilo do botão, a posição e outras configurações.

Personalizando o Botão de Bolha do Chatbot do Paragraph

O Botão de Bolha do Chatbot do Paragraph pode ser personalizado através das seguintes opções de configuração:

window.paragraphChatbotConfig = {
    // Obrigatório, gerado automaticamente pelo Paragraph
    token: 'SEU_TOKEN',
    // Opcional, padrão é false
    isDev: false,
    // Opcional, quando isDev é true
    baseUrl: 'SEU_BASE_URL',
    // Opcional, aceita qualquer atributo HTMLElement válido, exceto `id`, como `style`, `className`, etc.
    containerProps: {},
    // Opcional, permite ou não que o botão seja arrastado, padrão é `false`
    draggable: false,
    // Opcional, o eixo ao longo do qual o botão pode ser arrastado, padrão é `both`, pode ser `x`, `y`, `both`
    dragAxis: 'both',
    // Opcional, um objeto de entradas configuradas no chatbot do Paragraph
    inputs: {
        // key é o nome da variável
        // ex.
        // name: "NOME"
    }
}

Substituindo os Estilos Padrão do Botão

Você pode substituir o estilo padrão do botão usando variáveis CSS ou a opção containerProps. Aplique esses métodos com base na especificidade do CSS para alcançar as personalizações desejadas.

1. Modificando Variáveis CSS As seguintes variáveis CSS são suportadas para personalização:

/* Distância do botão para baixo, padrão é `1rem` */
--paragraph-chatbot-bubble-button-bottom

/* Distância do botão para a direita, padrão é `1rem` */
--paragraph-chatbot-bubble-button-right

/* Distância do botão para a esquerda, padrão é `unset` */
--paragraph-chatbot-bubble-button-left

/* Distância do botão para cima, padrão é `unset` */
--paragraph-chatbot-bubble-button-top

/* Cor de fundo do botão, padrão é `#155EEF` */
--paragraph-chatbot-bubble-button-bg-color

/* Largura do botão, padrão é `50px` */
--paragraph-chatbot-bubble-button-width

/* Altura do botão, padrão é `50px` */
--paragraph-chatbot-bubble-button-height

/* Raio da borda do botão, padrão é `25px` */
--paragraph-chatbot-bubble-button-border-radius

/* Sombra do botão, padrão é `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
--paragraph-chatbot-bubble-button-box-shadow

/* Transformação ao passar o mouse sobre o botão, padrão é `scale(1.1)` */
--paragraph-chatbot-bubble-button-hover-transform

Para alterar a cor de fundo para #ABCDEF, adicione este CSS:

#paragraph-chatbot-bubble-button {
    --paragraph-chatbot-bubble-button-bg-color: #ABCDEF;
}

2. Usando Defina estilos inline usando o atributo style:

window.paragraphChatbotConfig = {
    // ... outras configurações
    containerProps: {
        style: {
            backgroundColor: '#ABCDEF',
            width: '60px',
            height: '60px',
            borderRadius: '30px',
        },
        // Para pequenas substituições de estilo, você também pode usar um valor string para o atributo `style`:
        // style: 'background-color: #ABCDEF; width: 60px;',
    },
}

Aplique classes CSS usando o atributo className:

window.paragraphChatbotConfig = {
    // ... outras configurações
    containerProps: {
        className: 'paragraph-chatbot-bubble-button-custom my-custom-class',
    },
}

3. Passando Entradas Há quatro tipos de entradas suportadas:

text-input: Aceita qualquer valor. A string de entrada será truncada se seu comprimento exceder o máximo permitido.
paragraph: Semelhante ao text-input, aceita qualquer valor e trunca a string se for maior que o comprimento máximo.
number: Aceita um número ou uma string numérica. Se uma string for fornecida, ela será convertida para um número usando a função Number.
options: Aceita qualquer valor, desde que corresponda a uma das opções pré-configuradas.

Exemplo de configuração:

window.paragraphChatbotConfig = {
    // Outras configurações...
    inputs: {
        name: 'apple',
    },
}

Nota: Ao usar o script embed.js para criar um iframe, cada valor de entrada será processado—comprimido usando GZIP e codificado em base64—antes de ser anexado ao URL.

Por exemplo, o URL com valores de entrada processados ficará assim: http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D.