How I Design AND BUILD Chatbots with Vulcan

So, it’s very simple to change Bot personas and have different Bot agents owning different flows.RouterIn the same way that we use the Chatbot Entry as a gateway to a new flow, a Router component is generally used a jump-off point.The Router is designed to enable us to connect different Flows, whereby you could navigate to a selected Chatbot Entry point.The Router is also quite powerful, in that it also possesses some additional options.‘Continue to Parent Flow’ is very useful when you temporarily navigate to a Flow and then want to rejoin the original source flow once it is completed.‘Send Bot Message’ can trigger any of your existing Bot messages from anywhere in your Flows.‘Emit Signal’ can pass some temporary state information to the next part of the Flow.‘Submit on Server’ is normally an action tasked with sending some data to a pre-determined API endpoint for storage in the backend database.‘Open Gallery’ will trigger the opening of the filepicker or mobile photo gallery feature (native).‘Open Camera’ will trigger the opening of the webcam or mobile camera feature (native).‘Open Page’ will open a web page to the target URL in the web browser.FilterThe Filter component enables us to add conditional logic to our Flows.It has access to the State Machine (more on this to later) which it can use to construct and execute simple expressions, that will determine how our conversation will flow.It also has a little IntelliSense-style auto-suggest feature to let you know what variables are held in state that you can use, as well as some validation to check your expression is valid — notice how the input turns from red to white when I complete the expression.EndpointIf you didn’t think that everything that came before was exciting, then (aside me not believing you… ????) let’s get into the really fun stuff.The Endpoint component is essentially a REST client, enabling us to integrate with any REST API’s..We can handle the responses and put the data we receive into our State Machine.In your Project Settings, you can define your endpoint request templates.These requests are then available to instances of your Endpoint components inside your Flows.Not a real example Auth Request!!!There’s a lot that we can do with the Endpoint component and how the data we receive gets managed in the State Machine, so we’ll save that for a deep dive another day.Dialogue FlowUp until now, we’ve essentially been working with examples that are based on managing the state and variables provided through what are essentially “Quick Replies” (in Facebook Messenger parlance) — pre-defined User input options in the form of buttons, checklists and radio buttons..The Dialogue Flow component gives us the power of handling free-text natural language input from the User.We can store the DialogueFlow response in our signal to the next step of the flow or pluck specific fields from the DialogueFlow response and store them in our State Machine Model.Render TemplateRender Template component provides access to our library of templated Components.For more advanced Components or to customise the style or functionality existing Components (if you know a little Vue.js), you can use the Custom Component builder.Components that you build can be saved and reused from your Components Library and instances further modified using the component props.State MachineThe Vulcan State Machine provides a flexible way to manage the state of our conversation..The context, or Scope of a conversation is closely tied to the current State, a critical piece of information that we discussed in my first article, and provides the tools we need for building awareness and relevancy into the conversation.In addition to Context, we have access to broader data sets, including Entities and variables that we can set and fetch on the fly as the conversation naturally progresses.By default, we have the following data structure available to us."scope": { "signal": {}, "Model": {}}Signal data has a short lifespan, typically it is killed off after next iteration in the Flow.If you want your data to persist longer, you can store it in the Model."scope": { "signal": { "user": { "name" : "Steve" } }, "Model": {}}You can access your data in Condition fields, Filter components — there’s lots of opportunities to apply simple and complex logic to your Bot from within Vulcan and without the need for much coding knowledge.To access the data inside your scope you can use dot syntax..For == "Steve"Conversation PreviewVulcan provides a built-in Conversation Preview tool.You can define the Entry point that you want to start from, as I’ve done in the sample above — very useful for testing and debugging as you can avoid going through the same repetitive steps in order to get to the exact part of the Flow you are working on.In addition, you can provide initial signal and Model data, that may mimic the real data that would be obtained in the real-world production environment.Not only do we build up our state machine as the conversation progresses, but we can also set an initial state..So, if you have contextually relevant information about the User that could be derived from your own database, for example, you can pre-load the state machine with information about the User, such as their name, email address or a session token.Here’s an example:In this flow, I want to skip over the introduction and name exchange part, if I already know the user’s name, which may already be provided by the the website or app that the Bot is running on..When testing, all I need to do is pass this state information to the Model, when I run the Bot.Pro Tip:It might also be useful to know the context of where your User has come from..You can parse the source URL of the referring site and set this in initial state to further personalise the flows and demonstrate awareness — just be careful not to overstep the creepy line here.const cameFrom = document.referrer?.(new URL(document.referrer)).hostname : null;// handle it through entry pointsif (cameFrom == "") { new Chatbot({id: '<entry_point_for_techcrunch>'})} else { new Chatbot({id: '<entry_point_for_anyone_else>'})}// or alternatively, handle it through filtersnew Chatbot({ id: '<general_entry_point>', Model: {cameFrom: cameFrom}})Chat WidgetAlright, so with all of that — what’s the point?.Well the point is to bring all of this to life by enabling rich conversations with your audience, your customers, visitors to your website, new leads.With Vulcan’s simple embeddable Javascript widget, you can enable a familiar chat pop up.<script src=”"></script>var chatbot = new Chatbot({ id: "", signal: {}, Model: {}, endpointServer: “”, styles: {}}) can customise the widget to suit the colour scheme of your site, using the simple configuration interface.You can bring your conversation to life in your website, web applications and soon your native mobile apps with our mobile SDKs.We will also be enabling integration with the leading messaging and Voice app platforms, such as Google Assistant, Alexa, Messenger, Telegram, Slack.— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —So today, this is how I both Design and BUILD Chatbots at Beach, using a tool we’ve developed based on our own experiences in conversation design and development.The Vulcan app is not quite ready for public use, but we’d love to have some keen early beta testers to give it a try and help us refine the product for release early next year..If that’s of interest to you, get in touch via our Slack groupSteve is the Founder of, a startup that builds beautiful software tools to make complex tasks easier.. More details

Leave a Reply