Feature Description

Carousel is an interactive element of the webchat interface that allows presentation of content in the form of a horizontal slider with multiple slides. Each slide can contain a title, text, graphics, and action buttons. Users can navigate between slides using buttons or touch gestures (swipe).

Applications

Carousel is an ideal solution for:

• Presenting products or services
• Displaying multiple options to choose from
• Creating interactive guides
• Presenting multistep instructions
• Showcasing image galleries with descriptions

Carousel Implementation

There are two ways to implement a carousel in SentiOne webchat:

1. Using the Carousel block - a simpler, visual method available in the Automate interface
2. Using the Carousel command - an advanced method requiring knowledge of JSON format

1. Implementation using the Carousel Block

SentiOne Automate offers a dedicated Carousel block that allows easy creation of carousels without the need to manually write JSON code.

Step 1: Adding the Carousel Block to Flow

1. In the Flow module, open modal with all block types

2. In the "Interaction" category, select the "Carousel" block

Step 2: Configuring the Carousel Block

After adding the Carousel block to Flow, you can configure its parameters:

1. Name the carousel
2. Specify whether the carousel should respond to user input
3. In the "Preview of carousel" section, you'll see a preview of the carousel being created
4. In the "Slide" section, you can configure individual slides:
   • Slide title
   • Image URL and alternative text
   • Slide content (with Markdown formatting support)
   • Buttons with different action types

Button Action Types

The carousel supports three types of buttons, each with its own actions:

1. Open URL - opens the specified URL in a new browser tab

   • Requires providing a URL that will be opened when the button is clicked

2. Send Reply - automatically sends a specified message to the webchat, as if it was typed by the user

   • Requires providing the content of the message that will be sent

3. Notify Host - sends a notification to the application hosting the webchat, enabling interaction between the carousel and the page on which the webchat is embedded (read more below) Read more

   • Requires providing a button identifier (buttonId) that will be passed to the event handler function

Customizing Carousel Appearance with customCss

SentiOne webchat allows full customization of the carousel appearance using the customCss mechanism. This enables you to adapt the visual presentation of the carousel to your visual identity, including image size and scaling.

Configuration in Channels Module

Before you can use custom styles, you need to configure them in the Channels module. As shown in the screenshot, there is a dedicated section for custom styling under "Custom Styles" where you can:

1. Set a Chat Custom Styles URL
2. Add direct CSS code in the Chat Custom Styles CSS field

This configuration panel allows you to apply custom styling to various elements, including the carousel component.

Legacy mode implementation (without using Channels module - only for Advanced users)

If you're using Legacy Mode for embedding the webchat, you must use the customCSS mechanism through the appearance.styles property structure:

window.sentiOneChat.initWebChat({
  // Other configuration parameters...
  appearance: {
    styles: {
      // URL to an external stylesheet
      url: 'https://cdn.sentione.com/chat-ui-launcher/themes/dark-blue.css',
      
      // Custom CSS rules for carousel elements
      customCss: `
        .carousel {
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .carousel__container img {
          object-fit: cover;
          width: 100%;
          height: 200px;
        }
        .carousel__message {
          padding: 12px;
          background-color: #f5f5f5;
        }
        .carousel .button.primary {
          background-color: #4caf50;
          border-color: #4caf50;
        }
      `,
      
      // Main theme color
      themeColor: '#4caf50'
    }
  }
});

Most Commonly Customized Carousel Elements

This mechanism gives you complete control over the carousel presentation, allowing you to adapt it to your design needs and ensure a consistent user experience that aligns with your brand's visual identity.

2. Implementation using the Carousel Command (advanced)

For advanced users, SentiOne enables adding a carousel through direct implementation of a JSON command in the "Say" node in the Flow module:

1. In the "Commands" section, add a command named Carousel
2. In the "Params" field, enter a JSON array with slides:

[
  {
    "title": "Slide title",
    "content": {
      "text": "Slide description",
      "graphics": {
        "url": "https://example.com/image.jpg",
        "alt": "Image description"
      },
      "buttons": [
        {
          "actionType": "open_url",
          "text": "Visit website",
          "actionParams": {
            "url": "https://example.com"
          }
        }
      ]
    }
  }
]

Handling notify_host Events in the Host Application

The notify_host type buttons allow for communication between the carousel in the webchat and the page on which it is embedded. To handle the click events of these buttons, you need to implement an appropriate handler in the page code.

Example Implementation of Carousel Event Handling

The following HTML code demonstrates an example implementation of a page with an embedded webchat that handles events from notify_host type buttons in the carousel:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of Carousel Integration with Your Own Page</title>
</head>
<body>
    <!-- SentiOne Webchat Script -->
    <script src='https://cdn.sentione.com/chat-ui-launcher/chat.1.60.2.js' type='application/javascript'></script>
    
    <script type="text/javascript">
        // Webchat initialization
        window.sentiOneChat.initWebChat({
            chatSrc: "https://webchat.your-environment.chatbots.sentione.com/fullscreen",
            channelId: "your-channel-id",
            
            // Handler for carousel button click events
            onCarouselButtonClicked: function (button) {
                console.log('Carousel button clicked:', button);
                
                // Checking the button ID and performing appropriate actions
                if (button.id === "create_ticket") {
                    // Example action - opening a problem report form
                    openTicketForm();
                } else if (button.id === "show_products") {
                    // Example action - navigating to the product list
                    navigateToProducts();
                }
                
                // You can also use button.actionParams.buttonId if you're passing additional parameters
            }
        });
        
        // Example functions called after button clicks
        function openTicketForm() {
            // Code responsible for opening the report form
            alert('Opening problem report form');
            // document.getElementById('ticketForm').style.display = 'block';
        }
        
        function navigateToProducts() {
            // Code responsible for navigating to the product page
            alert('Redirecting to product list');
            // window.location.href = '/products';
        }
    </script>
</body>
</html>

Parameters of the onCarouselButtonClicked Event

The onCarouselButtonClicked function receives as an argument a button object (button) that contains all information defined in the Carousel command:

{
  actionType: "notify_host",      // Action type (always "notify_host" for this event)
  text: "Button text",            // Text displayed on the button
  actionParams: {
    buttonId: "uniqueButtonId"    // Additional parameter passed to the handler
  }
}

Practical Applications

notify_host events can be used for:

1. Integration with external systems - e.g., opening forms, transferring data to CRM
2. Personalization of user experience - customizing page content based on choices in the carousel
3. Tracking user behavior - analytics of clicks and interactions with the carousel
4. Initiating business processes - e.g., starting the order placement process

Tips and Best Practices

1. Optimal number of slides - For the best user experience, it is recommended to use 2 to 5 slides in a carousel.

2. Images - Use clear, attractive graphics that represent your content well.

3. Text length - Remember that too long titles and button texts will be automatically shortened and ended with an ellipsis (...). To ensure optimal appearance:

   • Slide titles should have a maximum of 40-50 characters
   • Button texts should not exceed 20-25 characters
   • Slide content should be concise and readable

4. Testing - Remember to check the operation of the carousel on different devices to ensure an optimal experience for both mobile and desktop users.

5. Consistency - Ensure that all slides in the carousel have a similar structure and style, which will make navigation easier for users.

How to Display Message After Carousel

Problem

In the current webchat implementation, Carousel-type messages are always placed at the end of the turn by design. This behavior is part of the system architecture and works well for most use cases.

Example scenario requiring different order:

Standard behavior:
1. Bot: "Which variant do you choose?"
2. [Product carousel with options]

Required order for specific use cases:
1. [Product carousel with options]
2. Bot: "Which variant do you choose?"

For specific business scenarios where messages need to appear after the carousel, the BlockingOperation mechanism provides a solution.

Solution - Using BlockingOperation

To achieve the required message order (carousel followed by text message), we can utilize the BlockingOperation mechanism. This approach provides a workaround for controlling the timing of message delivery.

Target order (when using BlockingOperation):
1. [Product carousel with options]
2. Bot: "Which variant do you choose?"

Solution Architecture

Flow diagram

Start Context → Carousel → Say (BlockingOperation: true) → Say (2) → End
                  ↓           ↓                             
              Output 1    Blocks system              

How the workaround works

1. Send carousel

   • System sends carousel message to the user
   • Carousel is rendered in the user interface

2. Apply BlockingOperation

   • Next block in flow uses BlockingOperation: true
   • With marked Request User Input
   • This controls the timing of subsequent message processing

3. Release and continue

   • Following block releases the blocking state
   • System continues with the next message

4. Send followup message

   • Bot sends text message (e.g., question)
   • Message appears after the carousel

Implementation

Flow configuration

The workaround requires specific setup of blocks in the conversation flow:

1. Carousel Block - displays options to the user

   📘

   Do not check Request User Input

   Do not check Request User Input in next block after the carousel

   

2. Say Block (BlockingOperation: true) - applies the blocking mechanism

   

   
   

3. Say Block (2) - releases and sends the followup message

🤖 Example project:

Example project

⚠️ Implementation notes

• This workaround should be used only when necessary for specific business requirements
• Consider alternative design approaches before implementing
• Each blocking state must have corresponding release

Example flow configuration:

1. Carousel Block - displays product options
2. Say Block (BlockingOperation: true) - blocks processing
3. Say Block (2) - releases block and asks "Which variant do you choose?"

Recommended Best Practice

The current carousel behavior works well for standard scenarios. However, when designing conversation flows that require messages after carousels, consider the following approaches:

Considerations when using followup messages:

• Carousel visibility: Additional messages after carousel may affect carousel display and user interaction
• Flow complexity: Multiple sequential messages require careful UX consideration
• Performance: BlockingOperation adds processing steps to the flow

Alternative approaches to consider:

• Self-contained carousels: Include all necessary information and call-to-action within the carousel itself
• Embedded instructions: Add selection guidance directly in carousel titles or descriptions
• Action buttons: Use carousel action buttons instead of separate text prompts

Use the BlockingOperation workaround when specific business requirements necessitate messages after carousels.

Summary

This workaround demonstrates how to achieve specific message ordering using BlockingOperation when business requirements call for text messages to appear after carousels. The approach works within the existing system architecture to address specialized use cases.