SZ.chat - Implementação e Uso do Carrossel no Webchat : Parceiros

Introdução

O recurso de carrossel é uma funcionalidade interativa que está disponível exclusivamente no canal de webchat, proporcionando uma maneira prática e visualmente atraente de apresentar informações ou opções aos usuários. Por meio do carrossel, é possível exibir múltiplos itens organizados em um formato deslizante, permitindo que o usuário navegue entre diferentes cards, cada um contendo imagens, textos e botões de ação.

Neste artigo, você aprenderá a configurar e utilizar o carrossel de maneira eficiente, criando uma experiência mais dinâmica e envolvente para os usuários do seu webchat.

Configuração

Para configurar o carrossel no seu fluxo, será necessário utilizar uma estrutura padrão em HTML ou Mustache. Essa estrutura deve ser inserida diretamente em um componente de mensagem ou entrada de dados para que o carrossel seja renderizado corretamente no webchat. Abaixo, estão os passos básicos:

Escolha da Estrutura: Decida se o carrossel será configurado em HTML ou Mustache, de acordo com as necessidades do seu fluxo.

Mustache: Utilize Mustache se os dados que alimentarão o carrossel vierem de um JSON, permitindo a renderização dinâmica dos itens.

Mustache

{{!project:start}}

<carousel class="custom-carousel" totalcards="2">
  <div class="carousel-content">
      {{#TASKS}}
      <card class="custom-card-carousel">
          <img src="{{img}}">
          <title>{{nameProduct}}</title>
          <description>{{descriptionProduct}}</description>
          <button action="{{value}}" type="message">Este produto</button>
      </card>
      {{/TASKS}}
  </div>
<div class="carousel-controls">
    <button id="prevButton" class="mdi mdi-chevron-left"></button>
    <button id="nextButton" class="mdi mdi-chevron-right"></button>
</div>
</carousel>
{{!project:end}}

JSON

[
    {
        "img": "URL DA IMAGEM",
        "nameProduct": "Titulo do produto 01",
        "descriptionProduct": "Esta é a descrição do produto.",
        "id": 1
    },
    {
        "img": "URL DA IMAGEM",
        "nameProduct": "Titulo do produto 02",
        "descriptionProduct": "Esta é a descrição do produto.",
        "id": 2
    },
    {
        "img": "URL DA IMAGEM",
        "nameProduct": "Titulo do produto 03",
        "descriptionProduct": "Esta é a descrição do produto.",
        "id": 3
    }
]

HTML: Caso você prefira inserir os dados manualmente, a estrutura em HTML é mais adequada.

<carousel class="custom-carousel" totalcards="2">
  <div class="carousel-content">
    <card class="custom-card-carousel">
        <img src="URL DA IMAGEM">
        <title>Titulo do produto 01</title>
        <description>Esta é a descrição do produto.</description>
        <button action="1" type="message">Produto 01</button>
    </card>
    <card class="custom-card-carousel">
        <img src="URL DA IMAGEM">
        <title>Titulo do produto 02</title>
        <description>Esta é a descrição do produto.</description>
        <button action="1" type="message">Produto 01</button>
    </card>
    <card class="custom-card-carousel">
        <img src="URL DA IMAGEM">
        <title>Titulo do produto 03</title>
        <description>Esta é a descrição do produto.</description>
        <button action="1" type="message">Produto 01</button>
    </card>
    <card class="custom-card-carousel">
        <img src="URL DA IMAGEM">
        <title>Titulo do produto 04</title>
        <description>Esta é a descrição do produto.</description>
        <button action="1" type="message">Produto 01</button>
    </card>
  </div>
<div class="carousel-controls">
    <button id="prevButton" class="mdi mdi-chevron-left"></button>
    <button id="nextButton" class="mdi mdi-chevron-right"></button>
</div>
</carousel>

Nesse caso você deve substituir os valor da seguinte forma

Img src: Preencha com a URL de uma imagem pública
Title: título que a imagem terá no carrossel
Description: Descrição da imagem no carrossel

Button action: valor que será exibido para o cliente ao selecionar um dos item do carrossel

IMPORTANTE

É essencial garantir que as classes class="custom-carousel", class="carousel-content", class="custom-card-carousel", class="carousel-controls", class="mdi mdi-chevron-left" e class="mdi mdi-chevron-right" estejam corretamente configuradas na estrutura HTML.
A quantidade especificada em totalcards define o número de cards exibidos sem a necessidade de rolagem. No entanto, deve-se levar em consideração o tamanho da tela, pois se os cards não couberem, a rolagem será ativada.

Regras do `totalcards`

totalcards( 'números' ) = ajusta-se automaticamente com base no número especificado.
totalcards('auto') = ajusta-se automaticamente conforme o tamanho da tela.
totalcards('ausente') = ajusta-se automaticamente para exibir até 3 itens, se nenhum número for especificado.

<carousel class="custom-carousel" totalcards=3>
ou

<carousel class="custom-carousel" totalcards="auto">
ou

<carousel class="custom-carousel">

Exemplo do código

<carousel class="custom-carousel" totalcards="3">
  <div class="carousel-content">
    <card class="custom-card-carousel">
        <img src="https://www.fortics.com.br/wordpress/wp-content/uploads/2024/04/chatgpt2.jpg">
        <title>Uso do ChatGPT no WhatsApp</title>
        <description>Domine as estratégias para maximizar suas vendas</description>
        <button action="Uso do ChatGPT no WhatsApp" type="message">Conheça agora</button>
    </card>
    <card class="custom-card-carousel">
        <img src="https://www.fortics.com.br/wordpress/wp-content/uploads/2022/07/varios-canais-240x300.jpg">
        <title>Uma única plataforma</title>
        <description>Todos os canais da sua empresa centralizados em uma única plataforma</description>
        <button action="Uma única plataforma" type="message">Conheça agora</button>
    </card>
    <card class="custom-card-carousel">
        <img src="https://www.fortics.com.br/wordpress/wp-content/uploads/2022/08/mini-baner-fas-240x300.png">
        <title>Transforme clientes em fãs</title>
        <description>Descubra como o atendimento da sua empresa pode ser um diferencial que gera valor a marca</description>
        <button action="Transforme clientes em fãs" type="message">Descubra agora</button>
    </card>
  </div>
<div class="carousel-controls">
    <button id="prevButton" class="mdi mdi-chevron-left"></button>
    <button id="nextButton" class="mdi mdi-chevron-right"></button>
</div>
</carousel>

Exibição no webchat.

Inserção no Componente: Insira o código da estrutura do carrossel no componente de mensagem ou campo de entrada de dados que você deseja utilizar para exibir o carrossel.

Mensagem: o carrossel será enviado para o cliente e o fluxo seguirá sem aguardar o clique do cliente
Entrada de dados: o carrossel será enviado para o cliente e aguardará o clique, armazenado o valor dentro de uma variável.

SZ.chat - Implementação e Uso do Carrossel no Webchat Imprimir

Regras do totalcards

Artigos relacionados

Regras do `totalcards`