BotStudio

The BotStudio is an editor where you can create or change Flows that dictate the chatbot's behavior.

Parameters

Parameter	Type	Description	Required
action	String / Object	Can be initialize to initialize a new component or an object to call an action on a component.	Yes
token	String	Authentication token to authorize the component.	Yes
settings	Object	JSON object containing configuration settings for the Inbox component.	No
arguments	Array	JSON object containing configuration settings for the Inbox component.	No

Actions

Action	Description	Arguments	Settings
initialize	Initializes the component.		settings JSON object of new configuration settings.
updateSettings	Updates the component's settings.		settings JSON object of new configuration settings.
setFlow	Switches the active flow.	flowId ID of the flow.

Configuration Settings

Setting	Type	Description	Default
activeFlowId	string or null	Sets the flow id to be displayed for the user to edit.	null
readOnlyMode	boolean	Disable all options for editing, can be used to simply view a generated flow.	false
showPreview	boolean	Show the preview options used to emulate a conversation of that flow.	true

The theme section contains some Bot Studio specific colors as well.

Initialize

To load the Bot Studio component in your application, you need to embed the component's iframe in your HTML. The iframe's src attribute should be set to https://api.recrubo.app/public/v2/embed/component/bot-studio.

Example

<iframe id="botStudioFrame" src="https://api.recrubo.app/public/v2/embed/component/bot-studio" class="w-full h-full"></iframe>

<script type="text/javascript">
const botStudio = document.querySelector('#botStudioFrame')

botStudio.onload = (evt) => {
    const botStudioSettings = {
        action: 'initialize',
        token: 'XX-XX-XX-XX',
        settings: {
            theme: {
                builderStepBackground: '#D6E6F5',
                builderStepSelectedBorder: '#0267c1',
                builderStepBackgroundHover: '#e0ecf7',

                builderEndStepBackground: '#fcf2e0',
                builderEndStepSelectedBorder: '#9b6600',
                builderEndStepBackgroundHover: '#f6eacb'
            },
            botStudio: {
                activeFlowId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
                readOnlyMode: true,
                showPreview: false
            }
        }
    }

    botStudio.contentWindow.postMessage(botStudioSettings, 'https://recrubo.app')
}
</script>