Accepting user’s input
Similarly, there is a text field which accepts the url of an image. The values are stored in the component’s state variables.
Storing settings in server
The design settings are stored in the text format:
This forms part of the skill’s text file. When the user clicks on “save and deploy” button, the complete skill gets send to the server through the following API:
In the server, the skill is saved in susi_private_skill_data directory. Also, the design and configuration settings are stored in chatbot.json file.
Applying the settings to the bot
Now, in the susi-chatbot.js file, the custom theme settings are applied to the bot. The function getTheme() fetches the theme settings from the server via an ajax request. Then the function applyTheme() is executed which applies the theme to the chatbot.
Similarly, other theme variables are applied as well. Thus we have customised the theme of the SUSI chatbot plugin.
- SUSI Botbuilder page: https://skills.susi.ai/botbuilder
- Material UI color picker: https://www.npmjs.com/package/material-ui-color-picker
- About React setState: https://reactjs.org/docs/state-and-lifecycle.html