docs: 📝 Explain how to pass parent URL
This commit is contained in:
@ -14,10 +14,11 @@ import {
|
||||
NumberDecrementStepper,
|
||||
Switch,
|
||||
Text,
|
||||
Tag,
|
||||
Image,
|
||||
} from '@chakra-ui/react'
|
||||
import { ColorPicker } from 'components/theme/GeneralSettings/ColorPicker'
|
||||
import { useTypebot } from 'contexts/TypebotContext'
|
||||
import { useUser } from 'contexts/UserContext'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { BubbleParams } from 'typebot-js'
|
||||
|
||||
@ -30,30 +31,41 @@ export const ChatEmbedSettings = ({
|
||||
onUpdateSettings,
|
||||
...props
|
||||
}: ChatEmbedSettingsProps & StackProps) => {
|
||||
const { user } = useUser()
|
||||
const { typebot } = useTypebot()
|
||||
const [proactiveMessageChecked, setProactiveMessageChecked] = useState(false)
|
||||
const [isCustomIconChecked, setIsCustomIconChecked] = useState(false)
|
||||
|
||||
const [rememberProMessageChecked] = useState(true)
|
||||
const [customIconInputValue, setCustomIconInputValue] = useState('')
|
||||
|
||||
const [inputValues, setInputValues] = useState({
|
||||
messageDelay: '0',
|
||||
messageContent: 'I have a question for you!',
|
||||
avatarUrl: typebot?.theme.chat.hostAvatar?.url ?? user?.image ?? '',
|
||||
})
|
||||
|
||||
const [bubbleColor, setBubbleColor] = useState(
|
||||
typebot?.theme.chat.buttons.backgroundColor ?? '#0042DA'
|
||||
)
|
||||
|
||||
const [bubbleIconColor, setIconBubbleColor] = useState(
|
||||
typebot?.theme.chat.buttons.color ?? '#FFFFFF'
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (proactiveMessageChecked) {
|
||||
onUpdateSettings({
|
||||
button: {
|
||||
color: bubbleColor,
|
||||
iconUrl: customIconInputValue,
|
||||
iconUrl: isCustomIconChecked ? customIconInputValue : undefined,
|
||||
iconColor:
|
||||
bubbleIconColor === '#FFFFFF' ? undefined : bubbleIconColor,
|
||||
},
|
||||
proactiveMessage: {
|
||||
delay: parseInt(inputValues.messageDelay) * 1000,
|
||||
textContent: inputValues.messageContent,
|
||||
avatarUrl: inputValues.avatarUrl,
|
||||
rememberClose: rememberProMessageChecked,
|
||||
},
|
||||
})
|
||||
@ -61,43 +73,66 @@ export const ChatEmbedSettings = ({
|
||||
onUpdateSettings({
|
||||
button: {
|
||||
color: bubbleColor,
|
||||
iconUrl: customIconInputValue,
|
||||
iconUrl: isCustomIconChecked ? customIconInputValue : undefined,
|
||||
iconColor:
|
||||
bubbleIconColor === '#FFFFFF' ? undefined : bubbleIconColor,
|
||||
},
|
||||
proactiveMessage: undefined,
|
||||
})
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [
|
||||
inputValues,
|
||||
bubbleColor,
|
||||
rememberProMessageChecked,
|
||||
customIconInputValue,
|
||||
bubbleIconColor,
|
||||
proactiveMessageChecked,
|
||||
isCustomIconChecked,
|
||||
])
|
||||
|
||||
return (
|
||||
<Stack {...props}>
|
||||
<Stack {...props} spacing="4">
|
||||
<Heading fontSize="md" fontWeight="semibold">
|
||||
Chat bubble settings
|
||||
</Heading>
|
||||
<Flex justify="space-between" align="center" mb="4">
|
||||
<Flex justify="space-between" align="center">
|
||||
<Text>Button color</Text>
|
||||
<ColorPicker
|
||||
initialColor={bubbleColor}
|
||||
onColorChange={setBubbleColor}
|
||||
/>
|
||||
</Flex>
|
||||
<HStack>
|
||||
<Text flexShrink={0}>
|
||||
Custom button icon <Tag>Optional</Tag>
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={'Paste image link (.png, .svg)'}
|
||||
value={customIconInputValue}
|
||||
onChange={(e) => setCustomIconInputValue(e.target.value)}
|
||||
<HStack justify="space-between">
|
||||
<Text>Icon color</Text>
|
||||
<ColorPicker
|
||||
initialColor={bubbleIconColor}
|
||||
onColorChange={setIconBubbleColor}
|
||||
/>
|
||||
</HStack>
|
||||
<HStack justifyContent="space-between">
|
||||
<FormLabel htmlFor="custom-icon" mb="1" flexShrink={0}>
|
||||
Custom button icon?
|
||||
</FormLabel>
|
||||
<Switch
|
||||
id="custom-icon"
|
||||
onChange={() => setIsCustomIconChecked(!isCustomIconChecked)}
|
||||
isChecked={isCustomIconChecked}
|
||||
/>
|
||||
</HStack>
|
||||
{isCustomIconChecked && (
|
||||
<>
|
||||
<HStack pl="4">
|
||||
<Text>Url:</Text>
|
||||
<Input
|
||||
placeholder={'Paste image link (.png, .svg)'}
|
||||
value={customIconInputValue}
|
||||
onChange={(e) => setCustomIconInputValue(e.target.value)}
|
||||
minW="0"
|
||||
/>
|
||||
</HStack>
|
||||
</>
|
||||
)}
|
||||
<Flex alignItems="center">
|
||||
<FormControl
|
||||
display="flex"
|
||||
@ -120,7 +155,23 @@ export const ChatEmbedSettings = ({
|
||||
</Flex>
|
||||
{proactiveMessageChecked && (
|
||||
<>
|
||||
<Flex justify="space-between" align="center" pl="4" mb="2">
|
||||
<Flex pl="4">
|
||||
<HStack
|
||||
bgColor="white"
|
||||
shadow="md"
|
||||
rounded="md"
|
||||
p="3"
|
||||
maxW="280px"
|
||||
spacing={4}
|
||||
>
|
||||
{inputValues.avatarUrl && (
|
||||
// eslint-disable-next-line jsx-a11y/alt-text
|
||||
<Image src={inputValues.avatarUrl} w="40px" rounded="full" />
|
||||
)}
|
||||
<Text>{inputValues.messageContent}</Text>
|
||||
</HStack>
|
||||
</Flex>
|
||||
<Flex justify="space-between" align="center" pl="4">
|
||||
<Text>Appearance delay</Text>
|
||||
<NumberInput
|
||||
onChange={(messageDelay) =>
|
||||
@ -139,7 +190,21 @@ export const ChatEmbedSettings = ({
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
</Flex>
|
||||
<Flex justify="space-between" align="center" pl="4" mb="2">
|
||||
<Flex justify="space-between" align="center" pl="4">
|
||||
<Text>Avatar URL</Text>
|
||||
<Input
|
||||
type="text"
|
||||
onChange={(e) =>
|
||||
setInputValues({
|
||||
...inputValues,
|
||||
avatarUrl: e.target.value,
|
||||
})
|
||||
}
|
||||
value={inputValues.avatarUrl}
|
||||
placeholder={'Paste image link (.png, .jpg)'}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex justify="space-between" align="center" pl="4">
|
||||
<Text>Message content</Text>
|
||||
<Input
|
||||
type="text"
|
||||
|
@ -33,22 +33,19 @@ const parseButton = (button?: ButtonParams): string => {
|
||||
if (!button) return ''
|
||||
const iconUrlString = parseStringParam('iconUrl', button.iconUrl)
|
||||
const buttonColorstring = parseStringParam('color', button.color)
|
||||
return `button: {${iconUrlString}${buttonColorstring}},`
|
||||
const buttonIconColorString = parseStringParam('iconColor', button.iconColor)
|
||||
return `button: {${iconUrlString}${buttonColorstring}${buttonIconColorString}},`
|
||||
}
|
||||
|
||||
const parseProactiveMessage = (
|
||||
proactiveMessage?: ProactiveMessageParams
|
||||
): string => {
|
||||
if (!proactiveMessage) return ``
|
||||
const { avatarUrl, textContent, delay, rememberClose } = proactiveMessage
|
||||
const { avatarUrl, textContent, delay } = proactiveMessage
|
||||
const avatarUrlString = parseStringParam('avatarUrl', avatarUrl)
|
||||
const textContentString = parseStringParam('textContent', textContent)
|
||||
const rememberCloseString = parseNonStringParam(
|
||||
'rememberClose',
|
||||
rememberClose
|
||||
)
|
||||
const delayString = parseNonStringParam('delay', delay)
|
||||
return `proactiveMessage: {${avatarUrlString}${textContentString}${rememberCloseString}${delayString}},`
|
||||
return `proactiveMessage: {${avatarUrlString}${textContentString}${delayString}},`
|
||||
}
|
||||
|
||||
const parseIframeParams = ({
|
||||
|
@ -42,12 +42,8 @@ A popular request also is to set a variable to the current URL. Here is the valu
|
||||
window.location.href
|
||||
```
|
||||
|
||||
It will not give you the parent URL if you embed the bot on your site. A more bullet proof value would then be:
|
||||
:::caution
|
||||
It will not give you the parent URL if you embed the bot on your site.
|
||||
|
||||
```js
|
||||
window.location != window.parent.location
|
||||
? document.referrer
|
||||
: document.location.href
|
||||
```
|
||||
|
||||
It checks whether or not the bot is embedded and return the appropriate URL.
|
||||
A more bullet proof option is to pass the URL as a hidden variable in the embed code options. You can find an example [here](../../embed/html-javascript#additional-configuration).
|
||||
:::
|
||||
|
127
apps/docs/docs/embed/html-javascript.md
Normal file
127
apps/docs/docs/embed/html-javascript.md
Normal file
@ -0,0 +1,127 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# HTML & Javascript
|
||||
|
||||
## Standard
|
||||
|
||||
You can get the standard HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
|
||||
|
||||
There, you can change the container dimensions. Here is a code example:
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/typebot-js@2.2"></script>
|
||||
<div id="typebot-container" style="width: 100%; height: 600px;"></div>
|
||||
<script>
|
||||
Typebot.initContainer('typebot-container', {
|
||||
url: 'https://viewer.typebot.io/my-typebot',
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
This code is creating a container with a 100% width (will match parent width) and 600px height.
|
||||
|
||||
## Popup
|
||||
|
||||
You can get the popup HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/typebot-js@2.2"></script>
|
||||
<script>
|
||||
var typebotCommands = Typebot.initPopup({
|
||||
url: 'https://viewer.typebot.io/my-typebot',
|
||||
delay: 3000,
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
This code will automatically trigger the popup window after 3 seconds.
|
||||
|
||||
### Open or Close a popup
|
||||
|
||||
You can use these commands:
|
||||
|
||||
```js
|
||||
Typebot.getPopupActions().open()
|
||||
```
|
||||
|
||||
```js
|
||||
Typebot.getPopupActions().close()
|
||||
```
|
||||
|
||||
You can bind these commands on a button element, for example:
|
||||
|
||||
```html
|
||||
<button onclick="Typebot.getPopupActions().open()">Open the popup</button>
|
||||
```
|
||||
|
||||
## Bubble
|
||||
|
||||
You can get the bubble HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/typebot-js@2.2"></script>
|
||||
<script>
|
||||
var typebotCommands = Typebot.initPopup({
|
||||
url: 'https://viewer.typebot.io/my-typebot',
|
||||
delay: 3000,
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
This code will automatically trigger the popup window after 3 seconds.
|
||||
|
||||
### Open or close the proactive message
|
||||
|
||||
You can use this command:
|
||||
|
||||
```js
|
||||
Typebot.getBubbleActions().openProactiveMessage()
|
||||
```
|
||||
|
||||
You can bind this command on a button element, for example:
|
||||
|
||||
```html
|
||||
<button onclick="Typebot.getBubbleActions().openProactiveMessage()">
|
||||
Open proactive message
|
||||
</button>
|
||||
```
|
||||
|
||||
### Open or close the typebot
|
||||
|
||||
You can use these commands:
|
||||
|
||||
```js
|
||||
Typebot.getBubbleActions().open()
|
||||
```
|
||||
|
||||
```js
|
||||
Typebot.getBubbleActions().close()
|
||||
```
|
||||
|
||||
You can bind these commands on a button element, for example:
|
||||
|
||||
```html
|
||||
<button onclick="Typebot.getBubbleActions().open()">Open the chat</button>
|
||||
```
|
||||
|
||||
## Additional configuration
|
||||
|
||||
You can add hidden variable values in your embed code by adding the `hiddenVariables` option. Here is an example:
|
||||
|
||||
```js
|
||||
Typebot.initContainer('typebot-container', {
|
||||
url: 'https://viewer.typebot.io/my-typebot',
|
||||
hiddenVariables: {
|
||||
'Current URL': window.location.href,
|
||||
'User name': 'John Doe',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
It will populate the `Current URL` variable with the parent URL and the `User name` variable with "John Doe".
|
@ -1,65 +0,0 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Javascript library
|
||||
|
||||
Typebot Javascript library is open-source ([check out the repository](https://github.com/baptisteArno/typebot.io/tree/main/packages/typebot-js)). Feel free to contribute if you're a developer and wish to improve its features.
|
||||
|
||||
Whenever a typebot is embedded on your website, you have access to commands to automatically trigger actions on your embedding depending on its type.
|
||||
|
||||
## Popup
|
||||
|
||||
### Open or Close a popup
|
||||
|
||||
You can use these commands:
|
||||
|
||||
```js
|
||||
Typebot.getPopupActions().open()
|
||||
```
|
||||
|
||||
```js
|
||||
Typebot.getPopupActions().close()
|
||||
```
|
||||
|
||||
You can bind these commands on a button element, for example:
|
||||
|
||||
```html
|
||||
<button onclick="Typebot.getPopupActions().open()">Open the popup</button>
|
||||
```
|
||||
|
||||
## Bubble
|
||||
|
||||
### Open or close the proactive message
|
||||
|
||||
You can use this command:
|
||||
|
||||
```js
|
||||
Typebot.getBubbleActions().openProactiveMessage()
|
||||
```
|
||||
|
||||
You can bind this command on a button element, for example:
|
||||
|
||||
```html
|
||||
<button onclick="Typebot.getBubbleActions().openProactiveMessage()">
|
||||
Open proactive message
|
||||
</button>
|
||||
```
|
||||
|
||||
### Open or close the typebot
|
||||
|
||||
You can use these commands:
|
||||
|
||||
```js
|
||||
Typebot.getBubbleActions().open()
|
||||
```
|
||||
|
||||
```js
|
||||
Typebot.getBubbleActions().close()
|
||||
```
|
||||
|
||||
You can bind these commands on a button element, for example:
|
||||
|
||||
```html
|
||||
<button onclick="Typebot.getBubbleActions().open()">Open the chat</button>
|
||||
```
|
Reference in New Issue
Block a user