Incorporar em Websites

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