< 1 minutes read

I had a requirement where I needed to display the timestamp in each dialog. For this to work we will see how we can create a message wrapper over dialog in Botpress.

This is done by creating a controller which uses a wrapper and added this controller to lite\index.jsx

Note: Since v12, debugger already uses the MessageWrapper and only one can be set at a time. Instead, enable your wrapper for the embedded-webchat.

Follow the following steps to create a wrapper over an existing dialog in Botpress and using the same in embedded-webchat

1. Create a controller modules\infa-module\src\views\lite\components\InfaMessageController.jsx

import React from 'react'
export class InfaMessageController extends React.Component {
  componentDidMount() {
    this.props.store.setMessageWrapper({ module: 'infa-module', component: 'MessageWrapper' })
    console.log('mnt', this.props)
  componentDidUpdate(_prevProps, prevState) {
    this.props.store.setMessageWrapper({ module: 'infa-module', component: 'MessageWrapper' })
  render() {
    return null

2. Create a wrapper class modules\infa-module\src\views\lite\components\MessageWrapper.jsx

import React from 'react'
export class MessageWrapper extends React.Component {
  getTimestamp = () => {
    let date = new Date()
    let options = {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    return date.toLocaleTimeString('en-us', options)
  render() {
    return (
        <small className="infaTextTimestamp">{this.getTimestamp()}</small>

3. Add controller in modules\infa-module\src\views\lite\index.jsx

Here infa-module is my custom module, all customizations are done under this module. Read through this blog and create your own custom module.

export { MessageWrapper } from './components/MessageWrapper'
export { InfaMessageController } from './components/InfaMessageController'

4. Add your controller component inside overrides of modules\channel-web\assets\examples\embedded-webchat.html file.

	host: 'http://localhost:3000',
	botId: 'infaa1',
	overrides: {
		before_container: [{
				module: 'infa-module',
				component: 'InfaMessageController'

5. Build and run

yarn && yarn build && yarn start

6. Use your embedded webchat URL to check changes


create a message wrapper over dialog in botpress How to create a message wrapper over dialog in Botpress? image 2

Note: This is only specific to Botpress v12


I am a Fullstack developer and Consultant with an experience of 9+ years in the industry. I mainly work on Java, React, Javascript, NodeJs, Elasticsearch and Botpress.


Ruchi K. · August 2, 2019 at 2:46 pm

Thanks, this is really helpful.

Leave a Reply

Avatar placeholder

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.