How to create a custom component in Botpress? — Abhishek Simon

Botpress is an excellent bot framework, which is on-prem, and open-source, with plenty of options for customizations. This already has some built-in components like text, card, carousel, image, and dropdown, but what if we want a custom component?

In this tutorial, we are going to create a chart component to visualize our data. We are going to use primefaces to build this component which internally uses Chart.js.

Note: Botpress uses Reactjs to create components. Check out What, Why and First React Code tutorial for a quick 10 minutes read on getting started with Reactjs.

Before we can jump in to create our custom component, one needs to create a custom module. Please follow along this guide to create your custom module, then come back and resume.

Ok assuming you have created a custom module named infa-module, you should get the details of your module in the modules\infa-module\src\backend\index.ts file.

In order to use primereact first add it as your dependency

yarn add primereact

A custom component needs 3 items

1. A controller
2. A content type
3. Registration of this component in your bot.

Controller

Create your component controller inside your module modules\infa-module\src\views\lite\components\InfaChart.jsx

Note: For custom css classes please refer here.

add this component controller in your lite index file modules\infa-module\src\views\lite\index.jsx

Content Type

Create a content type in modules\infa-module\src\content-types\infa-chart.js

Registration

Enable this component by adding the component id inside #contentTypes of out\bp\data\bots\<BOT_ID>\bot.config.json file.

That’s it, now build and start Botpress server.

yarn && yarn build && yarn start

If everything is fine you should see your new shiny custom component under the Pick Content menu.

modules\infa-module\src\actions\getsampledata.js

Result

Note: Using Botpress v11x and v12x+

Originally published at https://aabingunz.com on August 6, 2019.

Hit the 👏 (claps) button to make it reachable to more audience.