blsmedia/bot
2
0
Fork 0
Code Activity

✨ Add Next.js embed library

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-07-15 12:26:12 +02:00
parent 81bc0746cf
commit e293cb0111
70 changed files with 918 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/embeds/js/README.md
View File

@@ -16,7 +16,7 @@ npm install @typebot.io/js
```
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js/dist/web.js'
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
Typebot.initStandard({
typebot: 'my-typebot',
@@ -34,7 +34,7 @@ There, you can change the container dimensions. Here is a code example:
```html
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
Typebot.initStandard({
typebot: 'my-typebot',
@@ -54,7 +54,7 @@ Here is an example:
```html
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
Typebot.initPopup({
typebot: 'my-typebot',
@@ -96,7 +96,7 @@ Here is an example:
```html
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'
Typebot.initBubble({
typebot: 'my-typebot',

2
packages/embeds/js/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@typebot.io/js",
"version": "0.0.80",
"version": "0.1.0",
"description": "Javascript library to display typebots on your website",
"type": "module",
"main": "dist/index.js",

2
packages/embeds/js/src/index.ts
View File

@@ -3,3 +3,5 @@ export * from './features/commands'
export type { BotProps } from './components/Bot'
export type { PopupProps } from './features/popup/components/Popup'
export type { BubbleProps } from './features/bubble/components/Bubble'
export type * from './features/bubble/types'
export type * from './features/popup/types'

8
packages/embeds/nextjs/.eslintrc.cjs Normal file
View File

@@ -0,0 +1,8 @@
module.exports = {
root: true,
extends: ['custom'],
rules: {
'@next/next/no-img-element': 'off',
'@next/next/no-html-link-for-pages': 'off',
},
}

5
packages/embeds/nextjs/.npmignore Normal file
View File

@@ -0,0 +1,5 @@
src
.eslintignore
.eslintrc.cjs
rollup.config.js
tsconfig.json

1
packages/embeds/nextjs/.npmrc Normal file
View File

@@ -0,0 +1 @@
//registry.npmjs.org/:_authToken=${NPM_TOKEN}

144
packages/embeds/nextjs/README.md Normal file
View File

@@ -0,0 +1,144 @@
## Install
```bash
npm install @typebot.io/nextjs
```
## Standard
```tsx
import { Standard } from '@typebot.io/nextjs'
const App = () => {
return (
<Standard
typebot="lead-generation-copy-3luzm6b"
style={{ width: '100%', height: '600px' }}
/>
)
}
```
This code is creating a container with a 100% width (will match parent width) and 600px height.
## Popup
```tsx
import { Popup } from '@typebot.io/nextjs'
const App = () => {
return <Popup typebot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
}
```
This code will automatically trigger the popup window after 3 seconds.
### Open or Close a popup
You can use these commands:
```js
import { open } from '@typebot.io/nextjs'
open()
```
```js
import { close } from '@typebot.io/nextjs'
close()
```
```js
import { toggle } from '@typebot.io/nextjs'
toggle()
```
## Bubble
```tsx
import { Bubble } from '@typebot.io/nextjs'
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' },
}}
/>
)
}
```
This code will show the bubble and let a preview message appear after 5 seconds.
### Open or close the preview message
You can use these commands:
```js
import { showPreviewMessage } from '@typebot.io/nextjs'
Typebot.showPreviewMessage()
```
```js
import { hidePreviewMessage } from '@typebot.io/nextjs'
Typebot.hidePreviewMessage()
```
### Open or close the chat window
You can use these commands:
```js
import { open } from '@typebot.io/nextjs'
open()
```
```js
import { close } from '@typebot.io/nextjs'
close()
```
```js
import { toggle } from '@typebot.io/nextjs'
toggle()
```
## Additional configuration
You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
```tsx
import { Standard } from '@typebot.io/nextjs'
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',
}}
/>
)
}
```
It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables).
Note that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.

45
packages/embeds/nextjs/package.json Normal file
View File

@@ -0,0 +1,45 @@
{
"name": "@typebot.io/nextjs",
"version": "0.1.0",
"description": "Convenient library to display typebots on your Next.js website",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"type": "module",
"scripts": {
"dev": "rollup --watch --config rollup.config.js",
"build": "rollup --config rollup.config.js",
"lint": "eslint --fix \"src/**/*.ts*\""
},
"keywords": [],
"author": "Baptiste Arnaud",
"license": "ISC",
"devDependencies": {
"@babel/preset-react": "7.22.5",
"@babel/preset-typescript": "7.22.5",
"@rollup/plugin-alias": "^5.0.0",
"@rollup/plugin-babel": "6.0.3",
"@rollup/plugin-node-resolve": "15.1.0",
"@rollup/plugin-terser": "0.4.3",
"@rollup/plugin-typescript": "11.1.2",
"@typebot.io/js": "workspace:*",
"@typebot.io/react": "workspace:*",
"@typebot.io/lib": "workspace:*",
"@typebot.io/prisma": "workspace:*",
"@typebot.io/schemas": "workspace:*",
"@typebot.io/tsconfig": "workspace:*",
"@types/node": "20.4.2",
"@types/react": "18.2.15",
"eslint": "8.44.0",
"eslint-config-custom": "workspace:*",
"react": "18.2.0",
"rollup": "3.26.2",
"rollup-plugin-typescript-paths": "1.4.0",
"tslib": "2.6.0",
"tsx": "3.12.7",
"typescript": "5.1.6"
},
"peerDependencies": {
"next": "12.x || 13.x",
"react": "18.x"
}
}

38
packages/embeds/nextjs/rollup.config.js Normal file
View File

@@ -0,0 +1,38 @@
import resolve from '@rollup/plugin-node-resolve'
import terser from '@rollup/plugin-terser'
import { babel } from '@rollup/plugin-babel'
import typescript from '@rollup/plugin-typescript'
import { typescriptPaths } from 'rollup-plugin-typescript-paths'
import alias from '@rollup/plugin-alias'
const extensions = ['.ts', '.tsx']
const indexConfig = {
input: './src/index.ts',
output: {
dir: './dist',
format: 'es',
},
external: ['next/dynamic', 'react', 'react/jsx-runtime'],
plugins: [
alias({
entries: [
{ find: '@typebot.io/js/dist/web', replacement: '../../js/dist/web' },
],
}),
resolve({ extensions }),
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
presets: ['@babel/preset-react', '@babel/preset-typescript'],
extensions,
}),
typescript(),
typescriptPaths({ preserveExtensions: true }),
terser({ output: { comments: false } }),
],
}
const configs = [indexConfig]
export default configs

16
packages/embeds/nextjs/src/index.ts Normal file
View File

@@ -0,0 +1,16 @@
import dynamic from 'next/dynamic'
export const Standard = dynamic(
() => import('@typebot.io/react/src/Standard'),
{ ssr: false }
)
export const Popup = dynamic(() => import('@typebot.io/react/src/Popup'), {
ssr: false,
})
export const Bubble = dynamic(() => import('@typebot.io/react/src/Bubble'), {
ssr: false,
})
export * from '@typebot.io/js'

14
packages/embeds/nextjs/tsconfig.json Normal file
View File

@@ -0,0 +1,14 @@
{
"extends": "@typebot.io/tsconfig/react-library.json",
"include": ["src/**/*"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"declaration": true,
"declarationMap": true,
"outDir": "dist",
"emitDeclarationOnly": true
}
}

18
packages/embeds/react/README.md
View File

@@ -1,7 +1,7 @@
## Install
```bash
npm install @typebot.io/js @typebot.io/react
npm install @typebot.io/react
```
## Standard
@@ -38,19 +38,19 @@ This code will automatically trigger the popup window after 3 seconds.
You can use these commands:
```js
import { open } from '@typebot.io/js'
import { open } from '@typebot.io/react'
open()
```
```js
import { close } from '@typebot.io/js'
import { close } from '@typebot.io/react'
close()
```
```js
import { toggle } from '@typebot.io/js'
import { toggle } from '@typebot.io/react'
toggle()
```
@@ -85,13 +85,13 @@ This code will show the bubble and let a preview message appear after 5 seconds.
You can use these commands:
```js
import { showPreviewMessage } from '@typebot.io/js'
import { showPreviewMessage } from '@typebot.io/react'
Typebot.showPreviewMessage()
```
```js
import { hidePreviewMessage } from '@typebot.io/js'
import { hidePreviewMessage } from '@typebot.io/react'
Typebot.hidePreviewMessage()
```
@@ -101,19 +101,19 @@ Typebot.hidePreviewMessage()
You can use these commands:
```js
import { open } from '@typebot.io/js'
import { open } from '@typebot.io/react'
open()
```
```js
import { close } from '@typebot.io/js'
import { close } from '@typebot.io/react'
close()
```
```js
import { toggle } from '@typebot.io/js'
import { toggle } from '@typebot.io/react'
toggle()
```

16
packages/embeds/react/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@typebot.io/react",
"version": "0.0.80",
"description": "React library to display typebots on your website",
"version": "0.1.0",
"description": "Convenient library to display typebots on your Next.js website",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"type": "module",
@@ -21,28 +21,28 @@
"devDependencies": {
"@babel/preset-react": "7.22.5",
"@babel/preset-typescript": "7.22.5",
"@rollup/plugin-alias": "^5.0.0",
"@rollup/plugin-babel": "6.0.3",
"@rollup/plugin-node-resolve": "15.1.0",
"@rollup/plugin-terser": "0.4.3",
"@rollup/plugin-typescript": "11.1.2",
"@typebot.io/js": "workspace:*",
"@typebot.io/lib": "workspace:*",
"@typebot.io/prisma": "workspace:*",
"@typebot.io/schemas": "workspace:*",
"@typebot.io/tsconfig": "workspace:*",
"@types/node": "20.4.2",
"@types/react": "18.2.15",
"@typebot.io/prisma": "workspace:*",
"eslint": "8.44.0",
"eslint-config-custom": "workspace:*",
"@typebot.io/schemas": "workspace:*",
"react": "18.2.0",
"rollup": "3.26.2",
"rollup-plugin-typescript-paths": "1.4.0",
"@typebot.io/tsconfig": "workspace:*",
"tslib": "2.6.0",
"tsx": "3.12.7",
"typescript": "5.1.6",
"@typebot.io/lib": "workspace:*"
"typescript": "5.1.6"
},
"peerDependencies": {
"@typebot.io/js": "workspace:*",
"react": "18.x"
}
}

6
packages/embeds/react/rollup.config.js
View File

@@ -3,6 +3,7 @@ import terser from '@rollup/plugin-terser'
import { babel } from '@rollup/plugin-babel'
import typescript from '@rollup/plugin-typescript'
import { typescriptPaths } from 'rollup-plugin-typescript-paths'
import alias from '@rollup/plugin-alias'
const extensions = ['.ts', '.tsx']
@@ -12,8 +13,11 @@ const indexConfig = {
file: './dist/index.js',
format: 'es',
},
external: ['react', 'react/jsx-runtime', '@typebot.io/js'],
external: ['react', 'react/jsx-runtime'],
plugins: [
alias({
entries: [{ find: '@typebot.io/js', replacement: '../../js' }],
}),
resolve({ extensions }),
babel({
babelHelpers: 'bundled',

19
packages/embeds/react/src/Bubble.tsx
View File

@@ -1,5 +1,6 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import React, { useCallback, useEffect, useRef } from 'react'
import type { BubbleProps } from '@typebot.io/js'
import '@typebot.io/js/dist/web'
type Props = BubbleProps
@@ -18,17 +19,6 @@ type BubbleElement = HTMLElement & Props
export const Bubble = (props: Props) => {
const ref = useRef<BubbleElement | null>(null)
const [isInitialized, setIsInitialized] = useState(false)
useEffect(() => {
;(async () => {
await import('@typebot.io/js/dist/web')
setIsInitialized(true)
})()
return () => {
ref.current?.remove()
}
}, [])
const attachBubbleToDom = useCallback((props: Props) => {
const bubbleElement = document.createElement(
@@ -40,10 +30,9 @@ export const Bubble = (props: Props) => {
}, [])
useEffect(() => {
if (!isInitialized) return
if (!ref.current) attachBubbleToDom(props)
injectPropsToElement(ref.current as BubbleElement, props)
}, [attachBubbleToDom, isInitialized, props])
}, [attachBubbleToDom, props])
const injectPropsToElement = (element: BubbleElement, props: Props) => {
Object.assign(element, props)
@@ -51,3 +40,5 @@ export const Bubble = (props: Props) => {
return null
}
export default Bubble

19
packages/embeds/react/src/Popup.tsx
View File

@@ -1,5 +1,6 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import React, { useCallback, useEffect, useRef } from 'react'
import type { PopupProps } from '@typebot.io/js'
import '@typebot.io/js/dist/web'
type Props = PopupProps
@@ -18,17 +19,6 @@ type PopupElement = HTMLElement & Props
export const Popup = (props: Props) => {
const ref = useRef<PopupElement | null>(null)
const [isInitialized, setIsInitialized] = useState(false)
useEffect(() => {
;(async () => {
await import('@typebot.io/js/dist/web')
setIsInitialized(true)
})()
return () => {
ref.current?.remove()
}
}, [])
const attachPopupToDom = useCallback((props: Props) => {
const popupElement = document.createElement('typebot-popup') as PopupElement
@@ -38,10 +28,9 @@ export const Popup = (props: Props) => {
}, [])
useEffect(() => {
if (!isInitialized) return
if (!ref.current) attachPopupToDom(props)
injectPropsToElement(ref.current as PopupElement, props)
}, [attachPopupToDom, isInitialized, props])
}, [attachPopupToDom, props])
const injectPropsToElement = (element: PopupElement, props: Props) => {
Object.assign(element, props)
@@ -49,3 +38,5 @@ export const Popup = (props: Props) => {
return null
}
export default Popup

11
packages/embeds/react/src/Standard.tsx
View File

@@ -1,5 +1,6 @@
import { useEffect, useRef } from 'react'
import React, { useEffect, useRef } from 'react'
import type { BotProps } from '@typebot.io/js'
import '@typebot.io/js/dist/web'
type Props = BotProps & {
style?: React.CSSProperties
@@ -22,12 +23,6 @@ type StandardElement = HTMLElement & Props
export const Standard = ({ style, className, ...assignableProps }: Props) => {
const ref = useRef<StandardElement | null>(null)
useEffect(() => {
;(async () => {
await import('@typebot.io/js/dist/web')
})()
}, [])
useEffect(() => {
if (!ref.current) return
Object.assign(ref.current, assignableProps)
@@ -35,3 +30,5 @@ export const Standard = ({ style, className, ...assignableProps }: Props) => {
return <typebot-standard ref={ref} style={style} class={className} />
}
export default Standard

1
packages/embeds/react/src/index.ts
View File

@@ -1,3 +1,4 @@
export { Standard } from './Standard'
export { Bubble } from './Bubble'
export { Popup } from './Popup'
export * from '@typebot.io/js'

4
packages/embeds/wordpress/trunk/public/class-typebot-public.php
View File

@@ -33,7 +33,7 @@ class Typebot_Public
function typebot_script()
{
echo '<script type="module">
import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js";';
import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js";';
if (
get_option('excluded_pages') !== null &&
get_option('excluded_pages') !== ''
@@ -77,7 +77,7 @@ class Typebot_Public
public function add_typebot_container($attributes = [])
{
$lib_url = "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js";
$lib_url = "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js";
$width = '100%';
$height = '500px';
$api_host = 'https://viewer.typebot.io';