I wanted to make a fun conversational experience where visitors to my site could ask questions about me. I chose my dog Bruno as the assistant as it would allow people to explore who I am but through someone else. I could have made a chatbot based on me or a general assistant, but I felt Bruno would be more personal.
The Story
I've always wanted to build my own little AI chatbot, but have never really found the time. I also didn't want to use a plain bot builder platform as I was already using Dialogflow and other tools.
I've been primarily used to Facebook Messenger chatbots and know the setup process well. I know the review process is lengthy (and actually they suspended the review process for now).
After exploring other options I stumbled upon Dialogflow's very own web messenger plugin, which I had no idea existed as we used other integrations.
I ended up testing it and was surprised how quick and easy it was to plug in. It may not be as pretty as Facebook Messenger but it has a clean and functional appeal.
All the main templates and rich message functionality were there. It's part of Dialogflow so it worked seamlessly. You can even make some minor customisation to the messenger window colours which I appreciated.
My Requirements
- Avoid Facebook: due to the review process and login requirements
- Avoid a platform: extra learning curve, subscriptions, cost
- Website plugin: Easily accessible on my website
- Utilise my Dialogflow experience
The discovery of Dialogflow’s web messenger was the winner for me.
The Process
Firstly, the goal: Create an informative and playful chatbot about me.
I will look at 5 areas here: Conversational Flow, Content, NLU, Rich Responses, and Personality.
Conversational Flow
I started planning what I wanted to include in the bot, deciding on 3 main components:
- About Me - My profile, work, hobbies, random questions and links to my social accounts
- My designs - Explore my conversation design and link to my portfolio
- Personality - Demonstrate some creative chatbot writing
I made use of Miro to make a general flowchart of the conversational flow while exploring Dialogflow’s Messenger capabilities. I wanted to ensure the flow would work using their message types and UI only.
To keep things simple, AskTheBruno would always start with a greetings message with button options. This would also act as a central point to come back to.
I identified 5 main user flows:
1. About - Button
Profile
Education
Hobbies
Conversation Design (linked)
2. Latest News - Button
Latest update on what I’m up to. (linked to About and Design)
3. Conversation Design - Button
Definitions: I thought it important to define chatbots and conversation design
Link to portfolio
4. Boop My Nose - Button
A fun feature expressing the bot’s personality
5. Free-form questions - NLU
Allow free input, allow Dialogflow to answer
Use Dialogflow Smalltalk agent
Add custom responses
I linked these main topics to where I thought users might wish to explore next, creating loops that would allow users to explore other areas.
I added the NLU component as I still wanted people to be able to ask Bruno about other topics that are not in the main flow. I trained these as separate intents, which I’ll go over next.
Content
I trained and added content about the most common topics I thought people would ask about me. I also received feedback from colleagues and friends.
Topics:
- General about
- Education
- Work
- Goals & mission
- Strengths & Weaknesses
- Why Spain
- About Bruno
- Contact info
- Easter eggs
Additionally, I trained some small Easter eggs such as “Boop the nose” which I thought matched the bot personality well.
My main restriction in writing the content was keeping it within the Web Messenger plugin window size.
After some experimentation, the maximum usable amount of text was around 80 characters.
In writing about my interests, I split this with the “Bruno! Continue...” button. I didn’t want to overwhelm users with a large chunk of text and wanted it to be more digestible.
The NLU
In past projects, all our small talk/canned responses were added manually. This was to add custom responses and templates that matched brand guidelines.
I utlised Dialogflow’s smalltalk agent:
Advantages:
- Pre-trained for a range of small talk queries
- Response variant: could add a variety of responses to enrich
Some restrictions:
- No possibility to add utterances
- Text only responses
I decided the restrictions were fine for my purpose of a portfolio bot. I did however add intents for “goodbye” and “Thanks” where I could enrich the experience by adding button replies and gifs too.
This was great to express more personality and some novelty features like the “give a treat” gif.
Rich Responses
Rich responses expand the types of response you can add to a bot. As common on Facebook Messenger, this allowed adding a button, quick reply and card responses.
Although in Dialogflow’s Messenger, these responses are a little less developed, they were sufficient for my purpose. It allowed me to add images, gifs and URL button links.
I used the Button response type to allow permanent buttons to display. This allowed users to press a button without the remaining ones disappearing. Users could explore each of my contact options.
Suggestion Chip Responses
This is the equivalent of Quick Replies on Facebook Messenger, where button options are displayed but disappear upon selection.
On Dialogflow’s Messenger, these are called ‘chips’.
I used these on the main parts of AskTheBruno’s flow.
These allow for quick navigation throughout the flow, without permanent buttons occupying the conversational window.
The Personality
Basing the personality on a dog made things fun and easier to craft the replies.
- Use of dog-related language
- Convert dog videos to gifs for interactive responses
- Maintain a third-person voice
- Playful dog-like tone
- Ability to joke about me
Early user testing revealed that a balance is important, to not go over the top with dog-related wording. I have attempted to get the balance right, but I’m still fine-tuning.
Final Result
I’m really pleased with the end result. It works seamlessly as a plugin on my website: on desktop and on mobile.
Even though Dialogflow is still keeping it in beta stage, it functions like a final version. There was only a minor issue during testing where on some days, the responses were delayed, with the Web Messenger displaying only “...”. My take is that this was only a temporary glitch in the Dialogflow agent.
AskTheBruno anywhere via the plugin on my website here.
