@ryen/nextjs v0.2.7
Install
npm install @ryen/nextjs
Standard
import { Standard } from '@ryen/nextjs'
const App = () => {
return (
<Standard
ryen="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
import { Popup } from '@ryen/nextjs'
const App = () => {
return <Popup ryen="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:
import { open } from '@ryen/nextjs'
open()
import { close } from '@ryen/nextjs'
close()
import { toggle } from '@ryen/nextjs'
toggle()
Bubble
import { Bubble } from '@ryen/nextjs'
const App = () => {
return (
<Bubble
ryen="lead-generation-copy-3luzm6b"
previewMessage={{
message: 'I have a question for you!',
autoShowDelay: 5000,
avatarUrl: 'https://app.ryen.org/favicon.png',
}}
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:
import { showPreviewMessage } from '@ryen/nextjs'
Ryen.showPreviewMessage()
import { hidePreviewMessage } from '@ryen/nextjs'
Ryen.hidePreviewMessage()
Open or close the chat window
You can use these commands:
import { open } from '@ryen/nextjs'
open()
import { close } from '@ryen/nextjs'
close()
import { toggle } from '@ryen/nextjs'
toggle()
Additional configuration
You can prefill the bot variable values in your embed code by adding the prefilledVariables
option. Here is an example:
import { Standard } from '@ryen/nextjs'
const App = () => {
return (
<Standard
ryen="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.
Note that if your site URL contains query params (i.e. https://ryen.org?User%20name=John%20Doe), the variables will automatically be injected to the Ryen. So you don't need to manually transfer query params to the bot embed configuration.
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago