Campos Labs - Integração do Agente com Sites em Diferentes Linguagens de Programação

Integração do Agente com Sites em Diferentes Linguagens de Programação

A integração do agente inteligente da Campos Labs ao seu site é projetada para ser simples, independente da linguagem de programação utilizada. O processo consiste em adicionar um pequeno trecho de código JavaScript ao site, tornando-o compatível com plataformas desenvolvidas em linguagens como HTML puro, Python (Flask/Django), PHP, JavaScript (React/Vue/Angular), Ruby on Rails, entre outras.

Visão Geral da Integração

Código Base do Widget

A Campos Labs fornece um código JavaScript que funciona como o núcleo da integração. Esse script é responsável por carregar e exibir o widget de atendimento no site.

<script src="https://camposlabs.com.br/widget.js" defer></script>
<script>
    CamposLabsWidget.init({
        clientId: "SEU_ID_UNICO",
        theme: "default",
        position: "bottom-right",
    });
</script>

Parâmetros comuns:

clientId: Identificador único do cliente fornecido pela Campos Labs.
theme: Tema visual do widget (ex.: "default", "dark").
position: Posição no site, como "bottom-right" (canto inferior direito).

Inserção no Site

O código deve ser inserido no arquivo HTML principal ou em um template compartilhado, dependendo da estrutura do site.

Integração em Diferentes Tecnologias

1. HTML/CSS/JavaScript Puro

Abra o arquivo principal do site, geralmente index.html. Insira o código do widget dentro da tag <head> ou antes do fechamento da tag <body>:

<script src="https://camposlabs.com.br/widget.js" defer></script>
<script>
    CamposLabsWidget.init({
        clientId: "SEU_ID_UNICO",
        theme: "default",
        position: "bottom-right",
    });
</script>

2. Python (Flask/Django)

Para Flask, adicione o código no arquivo de template base (ex.: base.html). Para Django, inclua o código no arquivo base compartilhado entre templates (ex.: base.html).

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <script src="https://camposlabs.com.br/widget.js" defer></script>
    <script>
        CamposLabsWidget.init({
            clientId: "SEU_ID_UNICO",
            theme: "default",
            position: "bottom-right",
        });
    </script>
</head>
<body>
    ...
</body>
</html>

3. PHP

Edite o arquivo principal, como header.php ou outro que seja carregado globalmente. Insira o código do widget na seção <head> ou no final da página:

<script src="https://camposlabs.com.br/widget.js" defer></script>
<script>
    CamposLabsWidget.init({
        clientId: "SEU_ID_UNICO",
        theme: "default",
        position: "bottom-right",
    });
</script>

4. JavaScript Frameworks (React, Vue, Angular)

React:

import { useEffect } from "react";

const App = () => {
    useEffect(() => {
        const script = document.createElement("script");
        script.src = "https://camposlabs.com.br/widget.js";
        script.defer = true;
        document.body.appendChild(script);

        script.onload = () => {
            window.CamposLabsWidget.init({
                clientId: "SEU_ID_UNICO",
                theme: "default",
                position: "bottom-right",
            });
        };
    }, []);

    return (
        
            {/* Conteúdo do site */}
        
    );
};

export default App;

Vue.js:

export default {
    mounted() {
        const script = document.createElement("script");
        script.src = "https://camposlabs.com.br/widget.js";
        script.defer = true;
        document.body.appendChild(script);

        script.onload = () => {
            window.CamposLabsWidget.init({
                clientId: "SEU_ID_UNICO",
                theme: "default",
                position: "bottom-right",
            });
        };
    },
};

Angular:

<script src="https://camposlabs.com.br/widget.js" defer></script>
<script>
    CamposLabsWidget.init({
        clientId: "SEU_ID_UNICO",
        theme: "default",
        position: "bottom-right",
    });
</script>

5. Ruby on Rails

Adicione o código no arquivo de layout principal (ex.: application.html.erb):

<script src="https://camposlabs.com.br/widget.js" defer></script>
<script>
    CamposLabsWidget.init({
        clientId: "SEU_ID_UNICO",
        theme: "default",
        position: "bottom-right",
    });
</script>

Notas Importantes

Scripts Adicionais: Caso a página utilize bloqueadores de scripts (ex.: Content Security Policy - CSP), adicione https://camposlabs.com.br à lista de domínios permitidos.
Responsividade: Certifique-se de que o site é responsivo para que o widget funcione corretamente em dispositivos móveis.
Validação: Após a instalação, teste o widget em diferentes navegadores para garantir a compatibilidade.

Conclusão

A integração do widget da Campos Labs é uma solução simples e versátil, compatível com uma ampla variedade de linguagens de programação e frameworks. Seguindo os passos detalhados acima, você pode habilitar o agente em seu site e aproveitar suas funcionalidades para melhorar o atendimento ao cliente.

Centro de Conhecimento