61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { Bubble } from '@/Bubble'
|
|
import {
|
|
open,
|
|
toggle,
|
|
close,
|
|
showPreviewMessage,
|
|
hidePreviewMessage,
|
|
setPrefilledVariables,
|
|
setInputValue,
|
|
} from '@typebot.io/js'
|
|
import { useState } from 'react'
|
|
import { leadGenerationTypebot } from './assets/leadGenerationTypebot'
|
|
import './assets/index.css'
|
|
|
|
export const Default = () => {
|
|
const [name, setName] = useState('John')
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
<button onClick={toggle}>Toggle chat window</button>
|
|
<button onClick={open}>Open chat window</button>
|
|
<button onClick={close}>Close chat window</button>
|
|
<button onClick={() => showPreviewMessage()}>
|
|
Show Preview Message
|
|
</button>
|
|
<button onClick={() => setInputValue('YOOOO!')}>Set input value</button>
|
|
<button onClick={hidePreviewMessage}>Close Preview Message</button>
|
|
<div>
|
|
<p>Predefined name:</p>
|
|
<input value={name} onChange={(e) => setName(e.target.value)} />
|
|
<button onClick={() => setPrefilledVariables({ Name: name })}>
|
|
Set predefined name
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<Bubble
|
|
typebot={leadGenerationTypebot}
|
|
apiHost="http://localhost:3001"
|
|
prefilledVariables={{
|
|
Name: ['John'],
|
|
}}
|
|
previewMessage={{
|
|
avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
|
|
message: 'Hello, I am a preview message',
|
|
autoShowDelay: 3000,
|
|
}}
|
|
theme={{
|
|
button: {
|
|
backgroundColor: '#FF7537',
|
|
iconColor: 'white',
|
|
size: 'large',
|
|
},
|
|
}}
|
|
isPreview
|
|
/>
|
|
</div>
|
|
)
|
|
}
|