React
Instalar
npm install @typebot.io/reactPadrão
import { Standard } from '@typebot.io/react'
const App = () => {
return (
<Standard
typebot="lead-generation-copy-3luzm6b"
style={{ width: '100%', height: '600px' }}
/>
)
}Este código cria um contêiner com 100% de largura (acompanhando o elemento pai) e 600px de altura.
Popup
import { Popup } from '@typebot.io/react'
const App = () => {
return <Popup typebot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
}Este código abre a janela do popup automaticamente após 3 segundos.
Balão
import { Bubble } from '@typebot.io/react'
const App = () => {
return (
<Bubble
typebot="lead-generation-copy-3luzm6b"
previewMessage={{
message: 'I have a question for you!',
autoShowDelay: 5000,
avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
}}
theme={{
button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
}}
/>
)
}Este código exibe o balão e faz uma mensagem de prévia aparecer após 5 segundos.
Configuração adicional
Você pode preencher previamente os valores das variáveis no código de incorporação, com a opção prefilledVariables. Veja um exemplo:
import { Standard } from '@typebot.io/react'
const App = () => {
return (
<Standard
typebot="lead-generation-copy-3luzm6b"
style={{ width: '100%', height: '600px' }}
prefilledVariables={{
'Current URL': 'https://my-site/account',
'User name': 'John Doe',
}}
/>
)
}Isso preenche a variável Current URL com "https://my-site/account" e a User name com "John Doe". Mais sobre variáveis: aqui.
Vale notar que, se a URL do seu site tiver parâmetros de consulta (por exemplo, https://ggchatbot.com?User%20name=John%20Doe), as variáveis serão injetadas automaticamente no bot. Ou seja, você não precisa repassá-los manualmente na configuração da incorporação.