Saltar al contenido principal

Cómo enviar Copia y Pega por BLiP Chat

  • Actualización

Índice:

  1. Requisitos previos
  2. Configurando Copia y Pega en el Builder
  3. Componente Lime de Copia y Pega
  4. Copia y Pega en BLiP Chat

 

Este es un componente exclusivo para BLiP Chat; su contenido no será renderizado por otros canales en las conversaciones con los usuarios.

Con este componente, puedes configurar datos para ser mostrados con título, cuerpo, pie de página y un botón para la acción de copiar el valor que se define en la configuración del componente.

 

Requisitos previos

 A continuación, tenemos los requisitos previos para el uso de Copia y Pega en BLiP Chat para algunas de las formas de integración.

Si tu integración incluye el uso de un iframe que englobe BLiP Chat de alguna manera, incluso si no se recomienda para todos los casos (usando nuestros métodos que ya tienen un iframe, como el uso de blip-chat-widget o nuestros paquetes móviles nativos), por seguridad puedes permitir el uso del portapapeles añadiendo la propiedad ‘allow’ con al menos el valor ‘clipboard-read; clipboard-write’ como en los ejemplos a continuación:

 

iframe.setAttribute('allow', 'clipboard-read; clipboard-write')

o

<iframe allow="clipboard-read; clipboard-write"></iframe>

 

Configurando Copia y Pega en el Builder

Una integración directa con la URL y clave del bot; tu propio sitio web debe permitir el uso del micrófono. Si el uso incluye algún iframe, verifica los requisitos generales.

 

Paquete blip-chat-widget

Si tu integración con BLiP Chat se realizó a través de la instalación del paquete node de blip-chat-widget (blip-chat-widget - npm), debes usar la versión mínima 1.10.1.

 

Script del blip-chat-widget

Si tu integración ocurrió a través de la inyección del script como en la documentación: ¿Cómo agregar un bot en un sitio web utilizando BLiP Chat?

Si la ruta para tu script ya está como https://unpkg.com/blip-chat-widget, no es necesario hacer ninguna acción, ya está siempre con la versión más actualizada. Sin embargo, si se especificó una versión en tu URL, debe ser al menos la 1.10.1, como sigue: https://unpkg.com/blip-chat-widget@1.10.1.

 

Android Nativo

Para la integración con Android Nativo (¿Cómo agregar un bot en una aplicación Android utilizando BLiP Chat?), tu aplicación debe estar preparada para solicitar el permiso de uso del portapapeles.

Documentación para desarrolladores de Android explicando qué son y cómo solicitar los permisos: Permisos en Android.

iOS Nativo

Para la integración con iOS Nativo (¿Cómo agregar un bot en una aplicación iOS utilizando BLiP Chat?), tu aplicación debe estar preparada para solicitar el permiso de uso del portapapeles.

Documentación para desarrolladores de iOS explicando qué son y cómo solicitar los permisos: Requesting authorization to capture and save media | Apple Developer Documentation.

 

Selecciona la opción 'Agregar bloque'.

 

Entonces puedes seleccionar la opción 'Componentes exclusivos'

 

Aparecerá un modal con las opciones de canales disponibles..

Después de seleccionar 'Blip Chat', la pantalla del modal mostrará los componentes exclusivos disponibles para ese canal.

 

Al seleccionar el componente de 'Copia y pega', se añadirá un nuevo bloque al builder.

 

 

Al hacer clic en editar el componente en la pestaña que se abrió a la derecha, aparecerán las primeras opciones de edición. En esta pantalla, es posible cambiar el título, el cuerpo y el pie de página.

 

Para editar el texto del botón y el valor que se copiará al portapapeles del usuario, debes hacer clic en el botón que realizará la acción. Así se abrirá una nueva ventana de edición.

 

Si solo es necesario cambiar el valor del botón, debes hacer clic en 'Guardar' y luego en el ícono para guardar el componente en su totalidad.

Puedes dejar un valor fijo o configurar un valor a través de las variables disponibles en el builder, igual que cualquier otro componente.

 

Componente Lime de Copia y Pega

Para configurar el componente de forma dinámica o enviar por cuenta propia el mensaje, tiene el siguiente patrón Lime:

 

{

        to: 'to@msging.net',

        from: 'from@msging.net',

        type: 'application/vnd.lime.copy-and-paste+json',

        content: {

          header: 'Segue o código',

          body: 'Clique no botão abaixo para copiar o código Pix.',

          footer: 'O código expira em 10 minutos.',

          button: {

            text: 'Copiar código Pix',

            value: 'Value'

          }

        }

      }

 

Copia y Pega en BLiP Chat

Con tu componente correctamente completado y el flujo funcionando, aparecerá de la siguiente forma en BLiP Chat:

Si el usuario hace clic en el botón 'Copiar código Pix' del ejemplo, el contenido del valor definido en el componente será copiado a su portapapeles.

 

Para más información, accede a la discusión sobre el tema en nuestra comunidad o a los videos en nuestro canal. 😃

Artículos relacionados