DEV Community: Bastien Botella

Top 5 Advices to Get Started With Programming

Bastien Botella — Mon, 08 Mar 2021 18:50:30 +0000

Learning a new skill is challenging for many reasons.

First of all, we start investing time in something we know only very little about and it can take days, weeks or even months before we start to understand what it takes to be "good" at it.
Since it takes a great amount of resilience to get from 0 to 1 and knowing where to start is always helpful.

To help all beginners, we gathered below the 5 things that any beginner should do when starting to learn programming.

1 - Pick an "easy" programming language

I know that when starting a new challenge, anyone wants to shoot to the moon and that's fair, but yet it is very helpful to start with a simple programming language in order to focus to what matters most: understanding the basics of programming.

Here are below programming languages that are nice to get started with programming:

PHP: this is a very simple and solid programming language, widely used over the internet, it is indeed a very nice language to get started.
CSML: this language is very simple and requires no software to be used, CSML Playground allows beginners to get started online.
Python: widely used among Data Scientists and web developers, Python can be very easy to use and well as very technical for deep use.

2 - Find yourself an app or website idea

Learning how to code is much easier when you have a use case in mind: a website for your chess club, a chatbot to book meting rooms, etc...

Having a target app in mind will help you to find what the next step should be. You will also be able to look hoe other have done the same kind of app.

For instance, for a chatbot, you'd need to learn the programming basics concepts as well as http requests.

3 - Start with conditions, loops and logic

These three concepts are mainly what defines a programming language, therefore they are common to every single programming language out there, even very low level languages like Assembler.

As a matter of fact when we started developing CSML, we started with conditions and logic, that allowed us to do pretty much anything we wanted right from the start.

4 - Be consistent when it comes to writing code

Many languages allow developers to write the same code in different ways. For instance in Javascript, semicolon are not mandatory, so are extra spaces and indentation. In CSML, the following pieces of code have the same behaviour :

// 1st way of writing this instruction
start:
  say "Hello how are you?"
  goto end

// The line below will show the same output
start: say "Hello how are you?" goto end

It is really important to be consistent across all pieces of code we write as developers. This is so important that tools exist to make sure developers write code the same way within organizations. At Clevy, we use the Airbnb JavaScript Linter, every code that goes into production respects these guidelines.

This is solely a habit and the earlier to get it, the better.

5 - Get involve in communities

When learning a new skill, it's vital to talk to other people to get help, to help others as well, or even just to read through conversations.

There are many communities over the internet: subreddits, slack teams, discord channels, dev.to, Facebook groups, etc...

For instance with CSML, we have a community on Slack that anybody can join. People help each other over there, share their issues, solve others' or just talk about the products they build.

Bonus - Don't give up 😉

How to Install a Self-Hosted CSML Engine on Ubuntu 18.04

Bastien Botella — Mon, 25 Jan 2021 16:16:33 +0000

CSML is a compelling open-source language and conversational engine to create rich chatbots. Did you know that you can also install and host it by yourself for free as a standalone web server on your own server? Let's find out how in this article!

Installation

On CSML Engine's github repository, we compile pre-built binaries for MacOS and Linux of the CSML Engine web server, called CSML Server, at every release, under the assets section (we also maintain docker images if you prefer). As in this example, we are going to install CSML Server on Ubuntu 18.04 (or most recent linux distributions such as Debian, CentOS, Amazon Linux 2...), we will use the linux-based 64-bit binary, called csml-server-linux-amd64. The latest release to date is v1.4.0: let's copy the address of the corresponding asset.

Right Click > Copy Link Address

To download the CSML Server executable on your own server, type the following command in your terminal:

$ wget https://github.com/CSML-by-Clevy/csml-engine/releases/download/v1.4.0/csml-server-linux-amd64

After the file is downloaded, you can simply make it executable, rename it and run it directly:

$ chmod +x csml-server-linux-amd64
$ mv csml-server-linux-amd64 csml-server
$ ./csml-server
> CSML Server listening on port 5000

Congratulations! It runs 🎉. Now go visit your server's IP on port 5000, which is in my case http://34.241.38.167:5000/ (but it will very likely be a different IP for you).

CSML Server's default homepage

If you can see this page, CSML is correctly installed and runs properly on your machine. But we are not there yet! We do have a bit of configuration to do. You can for now simply hit ctrl+C to kill the process.

Configuration

CSML Server can easily be configured with environment variables. In fact, the environment variables are documented on this very landing page, so it should be easy to do!

The CSML Engine requires a database, and works either with MongoDB or Amazon DynamoDB. There are advantages and drawbacks to each of these offerings; in this example, we are going to use MongoDB, which is a popular choice.

We will not cover how to install MongoDB in this article, but you can find instructions on how to setup MongoDB in their documentation, or you can also use one of the many ready-to-use SaaS offerings by some hosting providers. For example, MongoDB themselves have Atlas, a managed, cloud-based MongoDB service.

There are many ways to load environment variables in your shell. Let's simply create a simple .env file next to the server executable and copy-paste the default environment variables in this file for your setup:

ENGINE_DB_TYPE=mongo

MONGODB_HOST=localhost
MONGODB_PORT=27017
MONGODB_DATABASE=csml
MONGODB_USERNAME=
MONGODB_PASSWORD=

ENGINE_SERVER_PORT=5000

ENCRYPTION_SECRET=some-secret-string
DISABLE_SSL_VERIFY=false
DEBUG=true

Of course, you are free to change these variables to accommodate your own setup. Among other things, you should also obviously pick your own ENCRYPTION_SECRET and not leave the default value!

Then, you can run this command to export the variables from this file into your shell:

$ export $(cat .env | xargs)

To check that the environment is correctly set, you can use the env command and verify that everything looks right.

Then, re-run the ./csml-server command. The result will be the same, but now your server should be correctly connected to your database and ready to use!

Using your Self-Hosted CSML Server

To test if your CSML Server installation works properly, you can run a simple query, for example by saying "Hi!" to a sample bot:

curl -X "POST" "http://YOUR_SERVER_IP:ENGINE_PORT/run" \
     -H 'content-type: application/json' \
     -d $'{
  "bot": {
    "default_flow": "Default",
    "id": "mybot",
    "name": "MySuperBot"
    "flows": [
      {
        "id": "e0a13373-2037-4590-8018-ab14e74b27a1",
        "content": "start:\\n\\tsay \\"Hello from CSML Server!\\"\\ngoto end",
        "commands": [
          "/default"
        ],
        "name": "Default",
        "description": "Default custom flow"
      }
    ]
  },
  "event": {
    "metadata": {
      "some": "info",
      "about": "the current user"
    },
    "payload": {
      "content": {
        "text": "Hi!"
      },
      "content_type": "text"
    },
    "request_id": "67d283bd-35d5-4744-be61-2f063573022f",
    "client": {
      "user_id": "myuser",
      "channel_id": "mychan",
      "bot_id": "mybot"
    }
  }
}'

A sample request to a CSML Server instance

The server should respond with something like:

{
  "messages": [
    {
      "payload": {
        "content_type": "text",
        "content": {
          "text": "Hello from CSML Server!"
        }
      },
      "interaction_order": 0,
      "conversation_id": "555416aa-c033-4676-ad64-eaf5c6783617",
      "direction": "SEND"
    }
  ],
  "conversation_end": true,
  "request_id": "67d283bd-35d5-4744-be61-2f063573022f",
  "received_at": "2021-01-22T20:58:40.154Z",
  "interaction_id": "591c2ad1-b540-47b0-bd5c-9a5a3907cd0f",
  "client": {
    "bot_id": "mybot",
    "user_id": "myuser",
    "channel_id": "mychan"
  }
}

A sample response from CSML Server

You can find the full REST API documentation in OpenAPI v3 format on our Github repository.

Next Steps: Prepare For Production

This article gives you an easy starting point to install the CSML Engine on your own server. The instructions are similar if you plan to use your own development machine as well. (By the way, we also provide a MacOS (intel) binary.)

However, if you need to run your own CSML Server for a production payload, there are probably a few extra steps that you should take (or just use CSML Studio, the online CSML development environment that does not need any installation). You will probably need to:

add a reverse-proxy such as nginx and enable HTTPS for secure exchanges
add some redundancy to make sure that it is always available
make sure that your service is resilient and handles the loss of one or more processes gracefully
add some auto-scalability into the mix, to make sure that you are ready to serve the right number of simultaneous conversations for your use case

Depending on how you plan to distribute your bot, there are many good ways to do it. If you are looking for architecture advice, please reach out on Slack! We are running millions of conversations securely on CSML Studio and can probably point you in the right direction.

Get your Chatbot to Speak over 12 Languages with Deepl

Bastien Botella — Thu, 19 Nov 2020 11:44:45 +0000

One of the great strengths of chatbots is their ability to adapt to each and every user. Chatbots can remember user details, fetch information from third-party API, or ask questions to the user. Being able to speak and understand the user's language is surely on the top of the list when it comes to adapting the conversation to the user.

In this article we will see how to use translation to get a chatbot to understand the user and have a conversation in his/her language. We're going to use the Deepl App, available on the CSML Studio. Note that Deepl is not free but extremely accurate, there is an alternative app that you could use for free : Frengly; although it is free, it is also not even close to Deepl in terms of accuracy. Good news, both Apps work the same way.

Step1: Create a chatbot in one single language

Let's create a food recipe chatbot in english. We'll get the recipes from an open API: RecipePuppy. The chatbot is going to ask what sort of dish and what ingredient the user wants in the recipe, and then get the matching dish from the API. Easyyyyyyyyyyy.

start:
  say "Hi, I am the chatbot that find awesome recipes for you!"
  goto dishType

dishType:
  say "What type of dish are you looking for?"
  hold
  remember dType = event
  goto dishIngredient

dishIngredient:
  say "What ingredient would you like in the recipe?"
  hold
  remember dIngredient = event
  say "Ok! Let me find the right recipes for you!"
  goto results

results:
  do response = HTTP("http://www.recipepuppy.com/api/?i={{dIngredient}}&q={{dType}}").get().send()
  do recipes = response.results
  do cards = []
  foreach (recipe, i) in recipes {
    do cards.push(Card(
        title=recipe.title,
        subtitle=recipe.ingredients,
        image_url=recipe.thumbnail,
        buttons=[]))
  }
  say Carousel(
    cards = cards)
  goto end

Step2: Install the Deepl App

Now that we have our chatbot, let's get started with translation. Installing the Deepl App is the way to go. Head over to the Functions menu, find the Deepl App in the list, and install it. Enter your Deepl credentials to finish the installation. The same process can be done for Frengly.

Done!

Step3: Set the user's language

When a user first talks to the chatbot, we want to ask this user what's his/her language in order to switch from english to this language. Let's add this bit of logic.
First we check if the user language is already known by the chatbot (even if it's english!), and if it isn't we want the bot to go to the step pickLanguage before saying anything else. This way we can set the user language in memory for further use.

start:
  if (!language) goto pickLanguage
  say "Hi, I am the chatbot that find awesome recipes for you!"
  goto dishType

pickLanguage:
  do availableLang = ["fr", "en", "de", "es", "pt", "it", "jp", "cn", "ru"]
  say Question("What language should we speak?",
    button_type="quick_reply",
    buttons=availableLang)
  hold
  if (!availableLang.find(event)) {
    say "You should click on one of the buttons 🙃"
    goto pickLanguage
  }
  remember language = event
  say "Ok! Let's spreak {{language}}"
  goto start

Step4: Translate the content

Now that we've installed the App and know the user language, we need to dynamically translate everything that the chatbot and user say. This way the chatbot will be able to understand when the user asks an "Omelette du fromage" 🤣.

Let's create a CSML function to wrap the translating logic.

fn translate(from, to, text):
  if (from == to) return text
  do t = Fn("deepl", from=from, to=to, text=text)
  return t.translations[0].text

// Let's check how transltion work in the `dishType` step for instance
dishType:
  // Translating to the user language
  say translate("en", language, "What type of dish are you looking for (tart, stew, ...)?")
  hold
  // Translating user input to english before placing the value in a variable
  remember dType = translate(language, "en", event)
  goto dishIngredient

Click on the chatbot at the bottom right of the screen to see the result!

Here is the chatbot source code: https://github.com/CSML-by-Clevy/recipe-finder

Going further

Here are a few ideas to improve this chatbot:

Show several recipes with the Carousel() component
Give the opportunity to the user to change his/her language to an other one
Plug some NLP so the user can pick the language using actual words
Allow the user to provide more than one ingredient
Check if the dish types and ingredients exist

Well I guess there are many way to improve the chatbot but at least we've got a great base!

Use the actual Eliza algorithm in your chatbot

Bastien Botella — Mon, 26 Oct 2020 09:14:37 +0000

Even though the chatbot trend is fairly new, they've been around for a long time. I can remember talking to chatbots over ten years ago when trying to reach out to my mobile phone services (spoiler alert: I never got hold of them ~~).
And then in 2016, Mark Zukerberg announced the integration of chatbots on Facebook Messenger and the trend started. But how did all this start?

The first significant chatbot ever created was Eliza. It is a program, part of the early work in NLP (Natural Language Processing). Developed between 1964 and 1966, it was a state of the art NLP program back then, had to run on 128kb of ram (that was a lot back in 1966!). Eliza has a single purpose: keep the conversation running by asking questions to the user and trying to get him/her to keep talking. Eliza was actually meant to simulate the conversation of a psychotherapist.

Let's see how to integrate the Eliza algorithm in a CSML chatbot!

tl;dr: You can import the chatbot with the Eliza integration, by clicking on the link at the bottom of the page... and yes it's free.

Step 1: The use case

We're going to create a chatbot that will interact with people who want to chitchat or are feeling a little down.
This chatbot will:

propose a meditation video
give a random motivational quote
talk to the user using Eliza algorithm

Step 2: Let's create the video and quotes conversation

For the sake of simplicity, we'll create this chatbot in the CSML Development Studio, it's free, easy to use and I can share the chatbot at the end 🤙

start:
  say "Hello, I'm your Elizo"
  say Typing(3000)
  say "I'm here to make you feel good 🤗"
  say Typing(3000)
  goto menu

menu:
  say Question("What would you like to do?",
    buttons=[
      Button("I want to meditate") as btn_med,
      Button("I need some motivation!") as btn_mot,
      Button("Let's talk") as btn_talk
    ])
  hold
  if (event match btn_med) {
    goto meditation
  } else if (event match btn_mot) {
    goto motivation
  } else {
    say "Tell me what's on your mind ☺️"
    goto talk
  }

meditation:
  say "Here is video to help you with your meditation, enjoy 😌"
  say Video("https://www.youtube.com/watch?v=inpok4MKVLM")
  say Typing(20000)
  goto menu

motivation:
  do quotes = HTTP("https://type.fit/api/quotes").get().send()
  do shuffledQuotes = Shuffle(quotes)
  say Typing(3000)
  say "“{{shuffledQuotes[0].text}}”\n\n_{{shuffledQuotes[0].author}}_"
  say Typing(8000)
  goto menu

In the code above, we show three buttons to the user, the meditation step shows a video, the motivation step gives a motivational quote provided by an -awesome- API. Both of these steps bring the user back to the menu at the end.

Step 3: Integrate Eliza

In order to use the Eliza algorithm, we'll need to add it to our list of custom functions.

First, let's find a version of the algorithm that we can use. CSML supports large range of languages such as nodejs, python, java, go, etc... I am more of a nodejs guy myself so I found this repository that seems to do the job.

Let's open a new nodejs project, install the elizanode dependency using npm and create a index.js file.

// We import the dependency
const ElizaNode = require('elizanode');

exports.handler = async function handler(event) {
  // event.query encloses the user message
  if (!event.query) return { error: 'No query parameter' };
  // We init Eliza
  const eliza = new ElizaNode();
  // We get the answer from eliza
  const reply = eliza.transform(event.query);
  // We check if Eliza evaluates the user message as the end of the conversation
  if (eliza.quit) {
    return { end: true, message: reply };
  }
  return { end: false, message: reply };

};

And finally we need zip the package:

$ zip -r9 eliza.zip index.js node_modules

And now let's import it in the Studio:

Click on Functions in the sidebar, then Add custom function > Quick Mode
Click on the upload area and upload the file eliza.zip that you just created
Give a name to your function
Make sure that the runtime is set to nodejs12.x
Double check that the handler is index.handler

We're all set!

Step 4: Get Eliza to interact with the user

Let's now add the missing step to this chatbot: the talk step!

talk:
  hold
  do response = Fn("Eliza", query=event)
  say Typing(5000)
  say "{{response.message}}"
  if (response.end == true) {
    goto menu
  }
  goto talk

This step is basically an infinite loop: as long as Eliza does not detect that the user wants to end the conversation, we keep querying the algorithm so Eliza can answer. Note that a simple "Bye" can end the conversation at any given time, the user then go back to the menu.

Step5: Done!

That's it! We can now test Eliza 🎉

You can obviously add a few features to this chatbot, like add more NLP to it, or extend Eliza's vocabulary.

To import the ready-to-use chatbot, 👉 it's over here 👈.

Using NLP in a CSML Chatbot with Dialogflow

Bastien Botella — Mon, 19 Oct 2020 06:41:02 +0000

Dialogflow is one of the best and most popular tools on the market for Natural Language Processing. However, creating a full, rich chatbot conversation using only Dialogflow (and most other NLP libraries or services) can be quite difficult, which is why we created a NLP connector between CSML Studio and Dialogflow to get the best of both worlds!

Step 0. Setup

For this tutorial, we are going to assume that you already have setup a free Dialogflow account. For this example we will be using one of the simple pre-built agents, "User Name".
You can install this agent by searching for User Name under "pre-built agents"
You will also need a free CSML Studio account which will allow you to create rich chatbots and deploy them easily on any communication channel. Once that is done, simply create an empty bot, which you can do by visiting this page and clicking on "Create bot". If you are new to CSML or CSML Studio, I suggest you read the Getting Started first!

Step 1. Connecting Dialogflow and CSML Studio

To connect your chatbot with the Dialogflow agent, you will first need to get a Dialogflow service account key.

Visit your Dialogflow agent's settings panel
Under Google Project, click on the Project ID
Under IAM & Admin, go to Service Account.
If no service account exists, create one, otherwise go to step 5. Give the new service account a name (for example "Dialogflow CSML"), and click Create. Then give it a role of Dialogflow API Admin, continue. Finally, create the Service Account.
Find the service account in the list, and click on "create key". Select JSON, and click Create. A file will download to your computer.

Now that you have retrieved service account credentials for your Dialogflow agent, you can add them to your CSML chatbot:

Visit your chatbot settings on CSML Studio
Go to NLP and select Dialogflow as a NLP provider
Upload the file you downloaded before

Voilà! Your CSML chatbot is now correctly configured with your Dialogflow agent. Below is a video of the full setup process:

Step 2. Using Dialogflow NLP in your CSML Chatbot

NLP can be used in several different ways in a CSML chatbot: horizontally by matching intents with flows, or vertically to progress in a flow. Let's start with matching intents and flows.

Flow triggers

CSML flows are triggered by *commands. *When a command is found, the corresponding flow is launched, taking precedence over any other behavior. If an intent should launch a flow, you should add its name to the flow commands. This can be done in the flow's configuration.
Configuring flow commands
In this case, we created a flow called GetUsername and set one of its commands to name.user.get. If a user says "What's my name?", the the request will be sent for analysis to Dialogflow, which will return a match with intent name.user.get, which will then trigger the start step in flow GetUsername in the CSML Engine, closing any previously open conversation.

Inside flows

You can also use Dialogflow inside a flow to match incoming user events. For example, in this scenario, the bot asks the user if they like their username, and shows them 2 buttons:

At this stage, the user could use one of the buttons, but they could also type something like "I like my name very much", which we would like to match with one of the buttons. That's very easy! There are already 2 intents for that, name.user.feedback.good and name.user.feedback.bad. We can simply add the intent names to the corresponding buttons accepts parameter, and match the user input like this:

  say Question(
    "Do you like your name?",
    button_type="quick_reply",
    buttons=[
      Button("Yay!", accepts=["name.user.feedback.good"]) as btny,
      Button("Meh...", accepts=["name.user.feedback.bad"]) as btnn,
    ]
  )
  hold

  if (event.match(btny)) {
    say "I'm glad you like it!"
    goto end
  }
  else if (event.match(btnn)) {
    say "Oh, I'm sorry to hear that!"
    goto end
  }
  else {
    say "I'm sorry, I didn't get that."
    goto feedback
  }

Matching intents inside a flow
Now, if the user says something that is interpreted as name.user.feedback.good, the bot will react as if the user clicked on the Yay! button.

Entities

The final trick I would like to show is that you can also use your agent's *entities *in CSML!

Let's imagine a scenario where the user would want to change their name. They would say something like "now call me John". This sentence matches the name.user.save intent in Dialogflow, but also the given-name entity is set to "John".

Let's use this in our bot. We'll create a new flow to handle the request to change the name (with a name.user.save command), and try to trigger it with NLP.

If we try to print the event's content with say "{{event.get_content()}}", we see that we receive a large object containing quite a lot of information:

{
  "payload": "name.user.change",
  "text": "I want to change my name to John",
  "_nlp_provider": {
    "provider": "dialogflow",
    "project_id": "user-name-hetw"
  },
  "_original_event": {
    "content_type": "text",
    "content": {
      "text": "I want to change my name to John"
    }
  },
  "_nlp_result": {
    "allRequiredParamsPresent": true,
    "queryText": "I want to change my name to John",
    "intent": {
      "inputContextNames": [],
      "name": "projects/user-name-hetw/agent/intents/5d1759cb-6eb1-4cec-bde2-d7391c9a932d",
      "trainingPhrases": [],
      "followupIntentInfo": [],
      "displayName": "name.user.change",
      "parentFollowupIntentName": "",
      "messages": [],
      "rootFollowupIntentName": "",
      "mlDisabled": false,
      "outputContexts": [],
      "defaultResponsePlatforms": [],
      "parameters": [],
      "events": [],
      "priority": 0,
      "action": "",
      "resetContexts": false,
      "webhookState": "WEBHOOK_STATE_UNSPECIFIED",
      "isFallback": false
    },
    "speechRecognitionConfidence": 0,
    "languageCode": "en",
    "fulfillmentMessages": [
      {
        "message": "text",
        "platform": "PLATFORM_UNSPECIFIED",
        "text": {
          "text": [
            ""
          ]
        }
      }
    ],
    "webhookPayload": null,
    "action": "name.user.change",
    "intentDetectionConfidence": 1,
    "fulfillmentText": "",
    "webhookSource": "",
    "parameters": {
      "fields": {
        "last-name": {
          "stringValue": "",
          "kind": "stringValue"
        },
        "nick-name": {
          "stringValue": "",
          "kind": "stringValue"
        },
        "given-name": {
          "stringValue": "John",
          "kind": "stringValue"
        },
        "type": {
          "kind": "stringValue",
          "stringValue": ""
        }
      }
    },
    "sentimentAnalysisResult": null,
    "outputContexts": [],
    "diagnosticInfo": null
  }
}

We can see that event._nlp_result key contains everything as returned by Dialogflow's API (I encourage you to click through this link and see all the data that you can retrieve this way). You can actually access the entities this way: indeed, event._nlp_result.parameters.fields does contain all the possible entities for this intent, and in our case we can see that the given-name entity is set to "John".

Let's create a small function to extract any name-related entities from incoming intents:

fn getNameEntity(event):
  do entities = event._nlp_result.parameters.fields
  if (entities) {
    if (entities["given-name"].stringValue) return entities["given-name"].stringValue
    if (entities["last-name"].stringValue) return entities["last-name"].stringValue
    if (entities["nick-name"].stringValue) return entities["nick-name"].stringValue
  }
  return Null

Now, if the user says "I want to set my name to John", we will be able to directly detect the value of the name they want to set and set it directly with just a simple yes/no confirmation, but if they did not give us a name, we need to ask them for their name first.

start:
  // We know that the matched intent for this flow requires us to change the user's name,
  // but we need to check if the event triggering this flow has one of the `name` entities set
  remember newname = getNameEntity(event)

  // The user did not give us their new name, we need to specifically ask for it
  if (!newname) goto askForNameInput

  // Otherwise we can just ask for confirmation that we understood it right
  // and skip the "what's your new name" part
  goto confirmNewName

Sure enough, here is the result of this conversation:

Conclusion

As you saw, using an existing Dialogflow agent with CSML Studio is quite easy. The setup of this integration takes less than one minute, and lets you very easily benefit from the conversation building advantages of both platforms: with CSML, you can easily build rich conversations using not only text but also images, videos, carousels..., connect them to any API or service using built-in apps or your own functions in any programming language, and enhance your chatbot's comprehension skills by using Dialogflow's very powerful NLU!

In this tutorial, we only scratched the surface of what's possible to achieve with Dialogflow and CSML together as a brief introduction to this exciting feature of CSML Studio. The full source code of the chatbot demonstrated above is available on github. You can also import it on CSML Studio in just one click to get started quickly!

I'm confident that you will be able to use Dialogflow to its full power in your next CSML projects!

Create a customer support chatbot with Zendesk and CSML

Bastien Botella — Mon, 10 Aug 2020 10:47:17 +0000

Customer support is key to keep your existing customers, it is key to maintain a good reputation, it is key to acquire new customers.

A great way to take care of customer support is to work with a ticketing service that takes care of tracking the open tickets, helps you resolve issues, and provides notifications. We, at CSML, use Zendesk, it’s one of the most (if not the most) efficient product on the market, so we decided to make an integration to Zendesk for CSML.
With this CSML integration, your chatbot can create a ticket on Zendesk on the fly. Let’s see how this work.

The chatbot

The chatbot we’re going to build is an IT support chatbot, so let’s make a chatbot for the serie The IT Crowd. We’ll call this chatbot RoyBot.

This is Roy, asking the same question over and over again 👨‍💻
The goal of this chatbot is:

to handle all incoming support requests
ask the question that Roy asks 100% of the time: “Have you tried turning it off and on again?” Asking this question over 50% of the IT support enquiries.
create a ticket on Zendesk if the user has already restarted his computer. Note that this chatbot will be coded with CSML on its free development Studio.

Step 1: Build the chatbot base

Let’s code the chatbot base, for now let’s just ask to the user the question that Roy asks all day long, only we’ll be a bit more polite than Roy.
Here is the result, if you’re looking for the source code, it’s over here 👇https://gist.github.com/bastienbot/39af60477f77bbd96e724c8e68fb64e0

Step2: Install the Zendesk app

In the CSML development Studio, you can install “Apps”, they are connectors to third-party services. In this case, we’re going to install the Zendesk app.
To install it, go to Functions > Apps directory.

You will need three informations in order complete the App installation: ZENDESK_URL, ZENDESK_EMAIL and ZENDESK_API_TOKEN.
Let’s go find these.

Step3: Get the url, email and token from Zendesk

To get the API Token you will need to connect to Zendesk as administrator. Then go to: Admin > API, then you can create a token under the section “Token Access”.
The email is your account email, and the url is the first part of the dashboard url as follows: https://my-company.zendesk.com
Make sure you don’t keep the trailing slash at the end.

Step4: Time to finish the bot

Now that we have the App successfully installed, we only need to write a single line of code (line 43) to get the chatbot to create tickets on the go.

Whenever a user confirms having turned his device off and on again, the chatbot asks the user to describe the issue, remembers it and uses this information to create a Zendesk ticket on its own.

What’s next?

Depending on your business, there are a few ways to improve a customer support chatbot:

Adding a QnA NLP base, the user can ask questions to the chatbot using natural language, the chatbot can then answer frequently asked questions and forward the question to Zendesk if no suitable answer exists (exemple: Clevy)
Adding more chatbot flows for to help the user resolving the issue on his own. In fact, Apple as well as many other companies provides this service before opening a ticket.
Asking more questions to the user in order to have as many informations as possible when creating the ticket. The agent in charge of resolving the ticket won’t have to ask them later.
Get the user to upload a file (a screenshot for instance) that the chatbot will attach to the ticket.

With all these features, Roy can be no other than a happy man 😎.

Optimize your chatbot with Google Analytics

Bastien Botella — Mon, 03 Aug 2020 10:45:36 +0000

The golden rule when creating any kind of online service is to monitor its activity through analytics. Any business needs analytics, they are helping leaders take decisions, increase revenues, optimize processes among other things.

Chatbots are no exceptions to this rule and they also need their data to be analysed in order to improve. Right now, any chatbot company provides data like the number of messages sent and received, number of users, etc… and this is great to measure the chatbot activity on a macro level, but more often than not, chatbot creators also need some use-case oriented analytics, like a conversion funnel for a newsletter signup chatbot.

Google Analytics for chatbots

Google Analytics is a very powerful tool that pretty much everybody has used in the past. Most people know it as a service that provides analytics about the audience behaviour on a website, but it can also be used with chatbots, and in this case to create a funnel.

The overall mechanism

In order to create a funnel, we’ll need the chatbot to send:

A starting event: the user starts the flow
Events throughout the flows, very much like checkpoints, that will show us when a user drops An ending event: the user subscribed

All these events must be sent to Google Analytics.

Let’s see how that works with CSML using the development studio.
In the example below, we’ll assume you’ve created a free account on the studio.

Step 1: the chatbot

Let’s create a simple newsletter signup chatbot, only three questions in three different steps that eventually trigger a Zapier event to register the user.

Right now this chatbot is not yet linked to Google Analytics but at least we know what it’ll look like.

start:
  say "Hi, let's subscribe to an awesome newsletter 💌 !"
  // Starting event should go here
  goto firstname

firstname:
  say "What's your firstname?"
  hold
  remember firstname = event
  // First flow event
  goto lastname

lastname:
  say "What's your lastname?"
  hold
  remember lastname = event
  // Second flow event
  goto email

email:
  say "What's your email address?"
  hold
  if (!event.contains("@")) {
    say "Please enter a valid email address"
    goto email
  }
  remember email = event
  // Third flow event
  goto save

save:
  do Fn("zapier",
    hook="myhook/myhookid",
    payload={
      "firstname": firstname,
      "lastname": lastname,
      "email": email
    }
  )
  say "Ok **{{firstname}} {{lastname}}**, I have registered your email **{{email}}** to our newsletter!"
  say "Enjoy the great content 🎉"
  // Ending event
  goto end

Step 2: Setting up Google Analytics

a. Get the Google Analytics Property ID

First of all you will obviously need a Google Analytics account. You can then either use an existing property (website account), or create one. To go forward, you will only need the property ID that looks like “UA-xxxxxxx-x”.
To find this ID, open Google Analytics, go to “Admin” at the bottom left of the screen, then click on “Property settings”, you’ll then see the ID under “Tracking ID”.

b. Setup the Google analytics App

Now we need to connect the chatbot to Google Analytics. In order to do so, you can use the Google Analytics App in the Studio, you’ll just need to provide your Google Analytics property ID (UA-xxxxxxx-x) when you setup the app.

c. Setup the Uuid App

Since you want Google analytics to be able to track sessions, you’ll need to provide a unique ID per user. Luckily, there is an app for that : uuid. Go to the app store and set it up.

Step 3: Get the chatbot to send the events at the right time

Remember the code we wrote earlier ? We’re going to edit it as follow:

Adding a unique id for each new user
Adding the events checkpoints

It should look like this:

start:
  // If the user doesn't exist, we create a new id using the uuid app
  if (!user_id) remember user_id = Fn("utils/uuid", version="v4")
  say "Hi, let's subscribe to an awesome newsletter 💌 !"
  do Fn("google/analytics", user_id=user_id, category="csml_nl_chatbot", action="flow_process", label="start")
  goto firstname

firstname:
  say "What's your firstname?"
  hold
  remember firstname = event
  do Fn("google/analytics", user_id=user_id, category="csml_nl_chatbot", action="flow_process", label="firstname")
  goto lastname

lastname:
  say "What's your lastname?"
  hold
  remember lastname = event
  do Fn("google/analytics", user_id=user_id, category="csml_nl_chatbot", action="flow_process", label="lastname")
  goto email

email:
  say "What's your email address?"
  hold
  if (!event.contains("@")) {
    say "Please enter a valid email address"
    goto email
  }
  remember email = event
  do Fn("google/analytics", user_id=user_id, category="csml_nl_chatbot", action="flow_process", label="firstname")
  goto save

save:
  do Fn("zapier",
    hook="myhook/myhookid",
    payload={
      "firstname": firstname,
      "lastname": lastname,
      "email": email
    }
  )
  say "Ok **{{firstname}} {{lastname}}**, I have registered your email **{{email}}** to our newsletter!"
  say "Enjoy the great content 🎉"
  do Fn("google/analytics", category="csml_nl_chatbot", action="flow_process", label="end")
  goto end

As you can see, we create “checkpoints” throughout the flow, every time a user reaches one of these checkpoints, an event will be sent to Google Analytics.

Now if you try it out, you should see something that looks like the screenshot below.

Step 4: The funnel!

It’s hard to believe, but the funnel is ready…you only need to wait for Google Analytics to update it. Updates happen the next day, so once you see the events in the “Realtime > Events” menu, just wait 24 hours and then go to “Behavior > Events > Events flow”, and you’ll should see the funnel below!

That’s it, you’re now ready to analyse and optimize your chatbots.

Here are a few ideas:

You could perform AB testing by creating two steps doing the same thing and randomly sending the users to one step or the other. Each of these two steps would send different labels to Google Analytics, you would then be able to check which step performs best.
In the example above, you could send an event to Google Analytics if the users enter an invalid email address, then you would be able to see how many users drop after entering an invalid email address.
You could also ask more information to the users if your funnel shows very low drop rate.

I am sure there are tons of possible optimizations, what would be the first optimization on your list? Share it in the comments!

For more informations about CSML, visit csml.dev!