You can follow our lesson directly from the video below. At the end of the post you will find a Xenioo bot file that simply restores the example bot into your account for playback and testing. Let’s start!

Button Cards

The first component we will be checking out is the Button Card Action.

This action will display a variable amount of text (it will be split into multiple lines if necessary), as well as multiple buttons all grouped in a single frame.

We’ve already seen Quick Action Buttons but these buttons are different in two ways: first, they’re going to appear attached to the text content and second, they can be more than just a Postback to the bot.

You can, in fact, have Url buttons, that will redirect the user to another website, Phone buttons, that will activate a phone call or Share buttons that will activate the sharing of the content.

Much like we’ve seen in our previous lessons, Xenioo utilizes a component approach: the Button Card action contains only the basic properties and all the required content can be attached by adding more operations.

Go ahead and add more buttons to your Buttons Card.

Notice how the list of available operations changes? Xenioo will always filter your available actions and operations based on the most suitable, that way, you always have the content you need readily available without confusion.

Carousel

A carousel is an horizontal list of cards that can be shuffled to display different content. Ideally, each cart contains a different item that the user can browse from left and right.

Each card of the carousel can contain an image that will take most of the space, a title, a description and up to three different buttons.

As you will see in the video, with Xenioo you can build the carousel card by incrementally adding multiple components to create the exact final result you want. 

To simplify things, remember that you can expand and collapse each action and sub-operation by just clicking on each corresponding icon in the properties panel.

Items List

Lists are another multiple content display mechanism.

Instead of displaying images and buttons shifting from right to left, an Items List Action will display all items in an ordered table with smaller images and buttons. While the carousel may be ideal for bigger, image related content, the list is surely more suitable for a products list or a basket recap.

There’s no real limit to the number of items that can go in a list but keep in mind that the user may have limited vertical space in the chat area.

Choosing your buttons

While Postback and Url buttons are supported on all channels and platforms, Phone and Share buttons are not.

A Phone button used on a desktop browser chatbot may activate a Skype call or some kind of messaging client but it is most likely to be blocked, ruining the user experience.

Conversely, a Share button is only supported by Facebook messenger, and will not be visible when using the same chatbot through browser or Slack.

Be mindful of these limitations when designing your card’s content with multi-platforms in mind.

Wrapping up

Knowing what type of content container is available for your chatbot is key to a meaningful information display.

In this lesson, we’ve learned how you can display content in advanced and dynamic ways. 

As with all our lessons, you can find the chatbot sample in your Xenioo account so that you can import it to further experiment and learn.

The post TUTORIAL #4: Using button groups, cards and carousel appeared first on Xenioo.

You can follow our lesson directly from the video below. At the end of the post you will find a Xenioo bot file that simply restores the example bot into your account for playback and testing. Let’s start!

Button Cards

The first component we will be checking out is the Button Card Action. This action will display a variable amount of text (it will be split on multiple lines if necessary), as well as multiple buttons all grouped in a single frame. We’ve already seen Quick Action Buttons but these buttons are different in two ways: first, they’re going to appear attached to the text content and second, they can be more than just a Postback to the bot. You can, in fact, have Url buttons, that will redirect the user to another website. Phone buttons, that will activate a phone call or share buttons that will activate the sharing of the content.

Much like we’ve seen in our previous lessons, Xenioo utilizes a component approach: the Button Card action contains only the basic properties and all the required content can be attached by adding more operations. Go ahead and add more buttons to your Buttons Card. Notice how the list of available operations changes? Xenioo will always filter your available actions and operations based on the most suitable, that way, you always have the content you need readily available without confusion.

Carousel

A carousel is an horizontal list of cards that can be shuffled to display different content. Ideally, each cart contains a different item that the user can browse from left and right.

Each card of the carousel can contain an image that will take most of the space, a title, a description and up to three different buttons. As you will see in the video, with Xenioo you can build the carousel card by incrementally adding multiple components to create the exact final result you want. To simplify things, remember that you can expand and collapse each action and sub-operation by just clicking on each corresponding icon in the properties panel.

Items List

Lists are another multiple content display mechanism. Instead of displaying images and buttons shifting from right to left, an Items List Action will display all items in an ordered table with smaller images and buttons. While the carousel may be ideal for bigger, image related content, the list is surely more suitable for a products list or a basket recap.

There’s no real limit to the number of items that can go in a list but keep in mind that the user may have limited vertical space in the chat area.

Choosing your Buttons

While Postback and Url buttons are supported on all channels and platforms, Phone and Share buttons are not. A phone button used on a desktop browser chatbot may activate a Skype call or some kind of messaging client but it is most likely to be blocked, ruining the user experience. Conversely, a share button is only supported by Facebook messenger, and will not be visible when using the same chatbot through browser or Slack.
Be mindful of these limitations when designing your card’s content with multi-platforms in mind.

Knowing what type of content container is available for your chatbot is key to a meaningful information display. In this lesson we’ve learned how you can display content in advanced and dynamic ways. 

You can find this chatbot in the Templates section of your Xenioo account. From there you can easily restore the chabot to try the explained features at will.

The post LEZIONE #4: usare bottoni, gruppi di bottoni, schede e caroselli appeared first on Xenioo.

Xenioo Actions currently support every kind of media attachment possible, and in this lesson we’re going to try them out.

You can follow our lesson directly from the video below. At the end of the post you will find a Xenioo bot file that simply restores the example bot into your account for playback and testing. Let’s start!

Using Media Actions

First of all, let’s create a brand new chatbot. As always, Xenioo will create a blank Behavior and a simple Interaction with just a text action.

We don’t need any text action this time, so let’s just delete it. We now have an empty interaction that we can use. So select the interaction, and add a new action: the action we need this time is an Image Action and you can find it under the “Content” tab of the Available Actions dialog.

Once the Action has been added, you may notice two options: “From Url” or “Upload To Storage”.

These two options are common on every media or resource-related content and allow you to choose how you would like to add content to your bot.

If you have an external resource, like an image Url, you can click on the “From Url” button and specify it in the textbox that appears. If instead, you wish to upload it to Xenioo servers, you can select “Upload To Storage” and upload it directly from your local drive.

In our example, we will be uploading an image directly from our drives. Supported image formats are GIF, JPG and PNG.

Depending on the size, Xenioo may need to resize the image to fit the chat window size.

As you can see, Xenioo will display the media content directly in the designer area.

Now let’s create a new Interaction and add a Video Action. Video Actions are similar to Image Actions, but as the name suggests, they are meant for displaying videos.

Like images, videos can be selected from an URL or from your local storage.

Once you’ve created a Video Action, you may want to add an Audio Action that will display a standard sound player widget in the user chat or a File Action that will allow the user to download a file.

Local Storage or Url

As you’ve seen, in all these actions you can choose to upload your content from your local drive or choose to attach it from an Url.

The second option does not download the file to Xenioo servers. Instead, the link you’ve provided will be used when running the chat. If you later change the content on the source Url, it will also change in the Xenioo chat window.

Xenioo storage may be limited (or not available) depending on your active Xenioo subscription. If storage is not available, the “Upload To Storage” option will be disabled.

Building for Facebook

If you’re specifically targeting Facebook when creating your bot with Xenioo there a two things to keep in mind:

• Facebook treats media files and downloadable files as chat ‘attachments’. These files are uploaded to Facebook servers every time the chat has to display them.
  These files will remain as resources in the user chat and will not be dynamic, like in the webchat.
• The limit for any kind of attachment is 2MB. You may circumvent this limit on Xenioo webchat by using an external Url, but when switching to Facebook chat, these elements will simply not appear in the user chat.

Wrapping up

In this lesson we’ve learned how to add multimedia content to our chatbot and display them interactively in our chat area.

As with all our lessons, you can find the chatbot sample in your Xenioo account so that you can import it to further experiment and learn.

The post TUTORIAL #3: Displaying multimedia content in the chat appeared first on Xenioo.

You can follow our lesson directly from the video below. At the end of the post you will find a Xenioo bot file that simply restores the example bot into your account for playback and testing. Let’s start!

Using Media Actions

First of all, let’s create a brand new chatbot. As always, Xenioo will create a blank Behavior and a simple Interaction with just a text action. We don’t need any text action this time so let’s just delete it. We’ve now have an empty interaction that we can use. So select the interaction, and add a new action: the action we need this time is an Image Action and you can find it under the “Content” tab of the Available Actions dialog.

Once the Action has been added, you may notice two options: “From Url” or “Upload To Storage”. These two options are common on every media or resource related content and allow you to choose how you would like to add content to your bot. If you have an external resource, like an image Url, you can click on the “From Url” button and specify it in the textbox that appears. If instead you wish to upload it to Xenioo servers, you can select “Upload To Storage” and upload it directly from your local drive.  In our example, we will be uploading an image directly from our drives. Supported image formats are GIF, JPG and PNG. Depending on the size, Xenioo may need to resize the image to fit the chat window size.

As you can see, Xenioo will display the media content directly in the designer area.

Now let’s create a new Interaction and add a Video Action. Video Actions are similar to Image Actions, but as the name suggests, they are meant for displaying videos. Like images, videos can be selected from an url or from your local storage.

Once you’ve created a Video Action, you may want to add an Audio Action that will display a standard sound player widget in the user chat or a File Action that will allow the user to download a file.

Local Storage or Url

As you’ve seen, in all these actions you can choose to upload your content from your local drive or choose to attach it from an Url. The second option does not download the file to Xenioo servers. Instead the link you’ve provided will be used when running the chat. If you later change the content on the source Url, it will also change in the Xenioo chat window.
Xenioo storage may be limited (or not available) depending on your active Xenioo subscription. If storage is not available, the “Upload To Storage” option will be disabled.

Building for Facebook

If you’re specifically targeting Facebook when creating your bot with Xenioo there a two things to keep in mind:

1. Facebook treats media files and downloadable files as chat ‘attachments’. These files are uploaded to Facebook servers every time the chat has to display them.
   These files will remain as resources in the user chat and will not be dynamic, like in the webchat.
2. The limit for any kind of attachment is 2MB. You may circumvent this limit on Xenioo webchat by using an external Url, but when switching to Facebook chat, these elements will simply not appear in the user chat.

In this lesson we’ve learned how to add multimedia content to our chatbot and display them interactively in our chat area.

You can find this chatbot in the Templates section of your Xenioo account. From there you can easily restore the chabot to try the explained features at will.

The post LEZIONE #3: visualizzare contenuti multimediali nella chat appeared first on Xenioo.