Halloween Chatbot Experience: Technical Guidelines

As promised, we have put together a guide to the more technical bits of our Halloween chatbot campaign. You can find how to reproduce the game narrator experience propelled by user prompts; how to leverage the HTML5 game framework as well as how to achieve direct communication between a Javascript module in Landbot and other modules.

If you have questions that we failed to address in this little guide, please submit them via the bot at the bottom of the article.

How to Achieve Game-Like Narrator Experience?

Looking at any adventure game, you will notice the messages from the narrator, the guide, appear at the bottom of the screen. The conversation is not just a way to educate the player but to move the game forward. Each message such as enter command, screen touch, etc. expects a user interaction.

To achieve this effect in Landbot we used RxJS, which is a library specialized in software programming based on events and asynchrony through observable sequences.import { fromEvent } from 'rxjs';
fromEvent(document, 'click').subscribe(() => console.log('Clicked!'));With the Landbot 3.0 release, we also launched @landbot/core, which handles connectivity operations and facilitates the use of asynchronous message reception.@landbot/core uses RxJS internally to generate an observable which objective is to emit the messages it receives from the database in real-time, whether from a bot, an agent, or the end-user.import Core from '@landbot/core';
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

const core = new Core({
firebase: firebase, // required
brandID: 12235, // required
channelToken: 'H-504749-YPHR4CX6K7LGJLXB', // required
});
core.pipelines.$sequence.subscribe((message) => console.log(message));
core.init();
For more information about the @landbot/core library, see the technical documentation.

To design an adventure-game-style conversational experience, we combined the two observables, so that each message appeared every time the user clicked on the document.import { of, fromEvent } from 'rxjs';
import { delayWhen, filter, concatMap } from 'rxjs/operators';

const clicks = fromEvent(document, 'click').subscribe(() => console.log('Clicked!'));

core.pipelines.$sequence.pipe(
filter(supportedMessages),
concatMap(message => {
if (message.action === 'script') {
// Code blocks are not visible and don't require user interaction
return of(message);
} else {
return of(message).pipe(delayWhen(() => clicks))
}
})
);

/**
* Basic support for text, buttons and code blocks from the builder.
*/
function supportedMessages(message) {
return ['text', 'dialog', 'hidden'].includes(message.type);
}Live example:

How to Apply an HTML5 Game Framework?

Developing games for HTML5 was quite simple thanks to Phaser, a free 2D game framework used to simplify the development of HTML5 games for both desktop and mobile.

To develop the Halloween chatbot experience, we only needed to know and apply the most basic aspects. And, of course, many graphic assets provided by our spectacular in-house graphic designer.

The following code snippet shows one of the usage examples. All in all, with just a few lines of code, we were able to create amazing effects:

Landbot + Phaser - Javascript Execution

There are many ways to achieve direct communication between a Javascript module (Landbot) and other modules, but probably the easiest is to expose the functions we want to execute in the "global scope".

In the code snippet below, we show an example from the game that connects Landbot with the game development engine.

The game module exposes a series of functions ('moveLeft', 'moveRight', 'jump') that are executed after the conversation reaches a specific point (message block) thanks to the code blocks that follow.