blsmedia/bot
2
0
Fork 0
Code Activity

docs: 📝 Explain how to pass parent URL

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-05-31 09:59:34 +02:00
parent 797ff1892d
commit 61e4ca1313
7 changed files with 229 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
apps/builder/components/share/codeSnippets/Chat/EmbedSettings.tsx
View File

@ -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>
<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"

11
apps/builder/components/share/codeSnippets/params.ts
View File

@ -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 = ({

12
apps/docs/docs/editor/blocks/set-variable.md
View File

@ -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
View 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".

65
apps/docs/docs/embed/javascript-commands.md
View File

@ -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>
```

18
packages/typebot-js/src/embedTypes/chat/button.ts
View File

@ -4,16 +4,21 @@ export const createButton = (params?: ButtonParams): HTMLButtonElement => {
const button = document.createElement('button')
button.id = 'typebot-bubble-button'
button.style.backgroundColor = params?.color ?? '#0042DA'
button.appendChild(createButtonIcon(params?.iconUrl, params?.iconStyle))
button.appendChild(createCloseIcon(params?.closeIconColor))
button.appendChild(
createButtonIcon(params?.iconUrl, params?.iconColor, params?.iconStyle)
)
button.appendChild(
createCloseIcon(params?.iconColor ?? params?.closeIconColor)
)
return button
}
const createButtonIcon = (
src?: string,
iconColor?: string,
style?: string
): SVGElement | HTMLElement => {
if (!src) return createDefaultIcon()
if (!src) return createDefaultIcon(iconColor)
const icon = document.createElement('img')
icon.classList.add('icon')
icon.src = src
@ -21,20 +26,21 @@ const createButtonIcon = (
return icon
}
const createDefaultIcon = (): SVGElement => {
const createDefaultIcon = (iconColor?: string): SVGElement => {
const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
icon.setAttribute('viewBox', '0 0 24 24')
icon.innerHTML = typebotLogoSvgTextContent()
icon.classList.add('icon')
icon.style.stroke = iconColor ?? '#ffffff'
return icon
}
const createCloseIcon = (closeIconColor?: string): SVGElement => {
const createCloseIcon = (iconColor?: string): SVGElement => {
const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
icon.setAttribute('viewBox', '0 0 24 24')
icon.innerHTML = closeSvgPath
icon.classList.add('close-icon')
icon.style.stroke = closeIconColor ?? '#ffffff'
icon.style.stroke = iconColor ?? '#ffffff'
return icon
}

1
packages/typebot-js/src/types.ts
View File

@ -30,6 +30,7 @@ export type ButtonParams = {
color?: string
iconUrl?: string
iconStyle?: string
iconColor?: string
closeIconColor?: string
}