Incorporar em Websites

os aplicativos do werbo podem ser incorporados em websites usando um iframe isso permite que você integre seu aplicativo werbo no seu site, blog ou qualquer outra página da web ao usar o botão de bolha do chatbot do werbo 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 werbo o botão de bolha do chatbot do werbo pode ser personalizado através das seguintes opções de configuração window\ werbochatbotconfig = { // obrigatório, gerado automaticamente pelo werbo 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 werbo 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` / \ werbo chatbot bubble button bottom / distância do botão para a direita, padrão é `1rem` / \ werbo chatbot bubble button right / distância do botão para a esquerda, padrão é `unset` / \ werbo chatbot bubble button left / distância do botão para cima, padrão é `unset` / \ werbo chatbot bubble button top / cor de fundo do botão, padrão é `#155eef` / \ werbo chatbot bubble button bg color / largura do botão, padrão é `50px` / \ werbo chatbot bubble button width / altura do botão, padrão é `50px` / \ werbo chatbot bubble button height / raio da borda do botão, padrão é `25px` / \ werbo chatbot bubble button border radius / sombra do botão, padrão é `rgba(0, 0, 0, 0 2) 0px 4px 8px 0px)` / \ werbo chatbot bubble button box shadow / transformação ao passar o mouse sobre o botão, padrão é `scale(1 1)` / \ werbo chatbot bubble button hover transform para alterar a cor de fundo para #abcdef, adicione este css \#werbo chatbot bubble button { \ werbo chatbot bubble button bg color #abcdef; } 2\ usando defina estilos inline usando o atributo style window\ werbochatbotconfig = { // 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\ werbochatbotconfig = { // outras configurações containerprops { classname 'werbo 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 werbo 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\ werbochatbotconfig = { // 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