Create your Own custom response | Chatbot Library
Skip to main content

Create your Own custom response

Hey, are you ready to create your own custom response and use different blocks?, let's go!

Check this doc

Or Look at this Tutorial in Spanish with Mizar.

Custom responses makes a chatbot lifefull

As you can check in the current chatbot that is living on the webpage, all of responses have different structures like chips, images, accordeons,buttons, paragraphs and more. These structures are called Blocks, and the union of blocks are called Templates.

If you take a quick look at the documentation you will see that there is a part called blocks, this is were all the blocks exists, also there is a part for templates. If you have some doublts about these structures in a code level you can put an eye.

Understanting how Blocks and Templates work

First of all you have to know that every block needs specific parameters, lets say for example, an accordeon that needs an image, a text, a title and subtitle. These requirements are shown in each block that is on the doc. Each of these blocks need some parameters filled, in order to be created.

Look at the example for the paragraph block:

Download this document

The Paragraph block needs 2 parameters to work, pTitleArray and pSubtitleArray as you see in the webBlock Documentation for this specific block. Each Parameter has to be filled with an Array, take care of the array structure provided in doc. In this case our code example looks like this.

$pTitleArray = ["Title1"];                                #array
$pSubtitleArray = ["Subtitle1"];                          #array

webParagraph($pTitleArray, $pSubtitleArray);

As you see, we are creating 2 arrays and using it on the webParagraph Block.

But, if you try to execute this block as response for a chatbot request, the chatbot will fail. This is because the block is just a block and does represent a middle part of the response.

Thats why we use Templates

Templates contain the other parts of the structure that we need to make the chatbot respond with our blocks.

Right now Zaroc has just one type of Template foreach integration, long ago there were a lot of template types, these types were not covered in these tutorials So if you have that type of templates I recommend you to migrate to the brand new templates, cause the other are deprecated.

So lets do an Example using our webParagraph Block.

  • Go to templates section and check out webTemplates, copy the example there or take it from here
$context = false;                                                     #string
$contextBody = [];                                                    #array
$webTitle = ["intentName"];                                           #array

$structure = ['image','comma','accordeon','comma','button'];          #array
$components = [                                                       #array-multi
    [$imageArray,$webTitle],
    [],
    [$imageArray,$titleArray,$aSubtitleArray,$aTextArray],
    [],
    [$bTitleArray,$bCustomArray,$bIconArray,$bColorArray]
];

webStructureTemplate($context, $contextBody, $webTitle, $structure, $components);

As you see we have 5 arrays, the first three are not too much important but the last two.

context can be true or false depending if you are looking to change something inside context with code.

contextBody will be the change that we are going to implement if context is true, if not, leave as a blank array.

webTitle references the name of the intent.

Last two are:

Structure which is an Array that contains the order of the element that the structure will have, the structure follow the order of Element + Separator + Element.

  • For webStructureTemplate just webBlocks are available, as facebookBlocks works for facebookTemplate etc...
  • For almost all the integrations with Exception of web, the only separator available is comma, so, most of the time you will see or use this comma. Separators are in the ZBasics/Blocks/CoreBlocks section
  • The name used in this array to refer the blocks is an specific name, you can see all the block names in the respective Template Section.

Components is an Multidimensional Array that contain all the parameters for each block.

  • Each Array refers to data parameters that have to be fulfilled, for example a button needs (bTitleArray, bCustomArray, bIconArray, bColorArray) parameters to be created.
  • Components Parameters are the same that block uses, also with the same order and hierarchy.
  • The array that refers a separator will be a empty array.

Lets Build a Template

  • First we have to take care of what we are going to build, in this case, the most common pattern is image + accordeon + button

Download this document

  • After getting the Idea of theTemplate we are going to build, lets initialize the parameters needed for a Template.
$context = false;                                          #string
$contextBody = [];                                         #array
$webTitle = [];                                            #array

$structure = [];                                           #array
$components = [];                                          #array

webStructureTemplate($context, $contextBody, $webTitle, $structure, $components);

.

Keep in Mind

You can Copy Code Snipets just by hovering in the up right corner of the code Snipet.

.

  • Then we have to fill webTitle (or Integration title), also do it with structure array with the structure we are doing to have.
$webTitle = ["exampleIntentName"];                                        #array

$structure = ['image','comma','accordeon','comma','button'];              #array

  • Now fill Components array with the arrays needed, in this case we are going to have just 5 elements so will be an array containing 5 arrays.
$components = []                               #array-multi
    [],
    [],
    [],
    [],
    []
];
  • Now fill each component array with their respective needed data, remember that separators as comma, superDivider etc have its component array empty.
  • Remember that each component parameters can be found in their respective block. For example: Image have imageArray and webTitle, this data has been found into webBlocks section.
$components = [                                                  #array-multi
    [$imageArray,$webTitle],
    [],
    [$imageArray,$titleArray,$aSubtitleArray,$aTextArray],
    [],
    [$bTitleArray,$bCustomArray,$bIconArray,$bColorArray]
];
  • Make sure all the data is provided correctly.
  • For context/contextBody, if you havent check context section you can leave it false/empty as shown in the first code snipet.

With this guide you will be able to reproduce common templates and do your own custom templates. Hope this helps you a lot... Mizar.