Persistent Menu

By adding the following lines of code in the webchat's object, you can enable a persistent menu. You can redefine the label for closing the persistent menu with closeLabel. Default text is 'Cancel'.

persistentMenu: [
{ label: "Home", payload: "hi" },
{ label: "Human Agent", payload: "help" },
{ closeLabel: "Close Menu" },
],

Example:

The persistent menu accepts the same properties as Botonic Buttons, e.g.: payload and url.

To darken the webchat in the background and focus on the persistent menu only, you can use a Dark Background. It can be defined under the properties theme.darkBackgroundMenu or theme.menu.darkBackground.

src/webchat/index.js

import { CustomPersistentMenu } from './custom-persistent-menu'
import { CustomMenuButton } from './custom-menu-button'
export const webchat = {
theme: {
userInput: {
persistentMenu: [
{ label: 'Home', payload: 'hi' },
{ label: 'Human Agent', payload: 'help' },
{ closeLabel: 'Close Menu' },
],
menu: {
darkBackground: true,
custom: CustomPersistentMenu,
},
menuButton: {
custom: CustomMenuButton,
},
},
},
}

Button

You can customize the persistent menu button with the theme.customMenuButton or theme.userInput.menuButton.custom properties.

Example:

To do so:

  1. Add an image for the button in the Assets folder.
  2. Create a custom-menu-button.js file.
  3. Customize the button as shown in the example below.

src/webchat/custom-menu-button.js

import React from 'react'
import styled from 'styled-components'
export const IconContainer = styled.div`
cursor: pointer;
width: 56px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
`
export const Icon = styled.img`
width: 18px;
`
export const CustomMenuButton = () => (
<IconContainer>
<Icon src={'https://image.flaticon.com/icons/svg/2948/2948037.svg'} />
</IconContainer>
)

Menu

In order to have your entire persistent menu customized, first you will need to create a button for each of the options. To do so, you can create a component like this one:

src/webchat/custom-persistent-menu-button.js

import React, { useContext } from 'react'
import styled from 'styled-components'
import { WebchatContext } from '@botonic/react'
import { Icon, IconContainer } from './custom-menu-button'
const StyledButton = styled.div`
cursor: pointer;
height: 50px;
width: 100%;
background: white;
display: flex;
justify-content: left;
align-items: center;
`
const Text = styled.p`
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
font-family: Lato;
font-size: 15px;
font-weight: 400;
color: black;
text-align: left;
`
export const CustomPersistentMenuButton = props => {
const { sendInput } = useContext(WebchatContext)
return (
<StyledButton
onClick={() => {
props.payload
? sendInput({
type: 'text',
data: String(props.label),
payload: props.payload,
})
: props.onClick()
}}
>
<IconContainer>
<Icon src={props.img} />
</IconContainer>
<Text
style={{
color: 'black',
}}
>
{props.label}
</Text>
</StyledButton>
)
}

Then to customize the persistent menu, you must use the theme.userInput.menu.custom or theme.customPersistentMenu property. To do so:

  1. Create a custom-persistent-menu.js file.
  2. Customize the menu as shown in the example below.
import React from 'react'
import styled from 'styled-components'
import { CustomPersistentMenuButton } from './custom-persistent-menu-button'
const ButtonsContainer = styled.div`
width: 100%;
bottom: 0;
position: absolute;
z-index: 2;
text-align: center;
`
export const CustomPersistentMenu = ({ onClick, options }) => {
return (
<ButtonsContainer>
<CustomPersistentMenuButton
label={options[0].label}
payload={options[0].payload}
img={'https://image.flaticon.com/icons/svg/2948/2948025.svg'}
/>
<CustomPersistentMenuButton
label={options[1].label}
payload={options[1].payload}
img={'https://image.flaticon.com/icons/svg/2948/2948059.svg'}
/>
<CustomPersistentMenuButton
label={options[2].closeLabel}
onClick={onClick}
img={'https://image.flaticon.com/icons/svg/271/271203.svg'}
/>
</ButtonsContainer>
)
}

Example:

Was this article useful?