How to Send Copy and Paste via BLiP Chat?

Index:

1. Prerequisites
2. Setting Up Copy and Paste in the Builder
3. Lime Component for Copy and Paste
4. Copy and Paste in BLiP Chat

This is a unique component for BLiP Chat; its content will not be rendered by other channels in conversations with users.

With this component, you can configure data to be displayed with a title, body, footer, and a button to copy the value defined in the component's configuration.

Prerequisites

 Below are the prerequisites for using Copy and Paste in BLiP Chat for some forms of integration.

If your integration includes the use of an iframe that encompasses BLiP Chat in some way, even if it's not recommended for all cases (using our methods that already include an iframe, such as using the blip-chat-widget or our native mobile packages), you can ensure clipboard access by adding the 'allow' property with at least the value 'clipboard-read; clipboard-write' as shown in the examples below:

or

Bot URL and Key

For a direct integration with the bot's URL and key, your own website must allow the use of the microphone. If the use includes an iframe, check the general prerequisites.

blip-chat-widget Package

If your integration with BLiP Chat was done through the installation of the node package blip-chat-widget (blip-chat-widget - npm), you should use at least version 1.10.1.

blip-chat-widget Script

If your integration occurred through script injection as outlined in the documentation: How to Add a Bot to a Website Using BLiP Chat?

If the route to your script is already set to https://unpkg.com/blip-chat-widget, no further action is necessary, as it is always updated to the latest version. However, if a version was specified in your URL, it must be at least 1.10.1, as follows:  https://unpkg.com/blip-chat-widget@1.10.1..

Native Android

For integration with Native Android (How to Add a Bot to an Android App Using BLiP Chat?), your app must be prepared to request permission to use the clipboard.

Refer to the Android developer documentation explaining what permissions are and how to request them: Permissions in Android.

Native iOS

For integration with Native iOS (How to Add a Bot to an iOS App Using BLiP Chat?), your app must be prepared to request permission to use the clipboard.

Refer to the iOS developer documentation explaining what permissions are and how to request them: Requesting Authorization to Capture and Save Media | Apple Developer Documentation.

Setting Up Copy and Paste in the Builder

In the builder screen of your bot that will be used only for BLiP Chat, you will start by adding a new component.

Select the option 'Add Block'.

Then you can select the option 'Exclusive Components'.

A modal will appear with the available channel options.

After selecting 'Blip Chat,' the modal screen will display the exclusive components available for that channel.

Upon selecting the 'Copy and Paste' component, a new block will be added to the builder.

When you click to edit the component in the tab that opens on the right, the first editing options will appear. On this screen, you can change the title, body, and footer.

To edit the button text and the value that will be copied to the user's clipboard, you should click on the button that performs the action. This will open a new editing window.

If you only need to change the button value, click 'Save,' and then click the icon to save the component as a whole.

You can set a fixed value or configure a value using the variables available in the builder, just like any other component.

Lime Component for Copy and Paste

To configure the component dynamically or send the message on your own, it follows this Lime pattern:

{

        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'

          }

        }

      }

Copy and Paste in BLiP Chat

With your component correctly filled out and the flow functioning, it will appear as follows in BLiP Chat:

If the user clicks the 'Copy Pix Code' button from the example, the content of the value defined in the component will be copied to their clipboard.

For more information, visit the discussion on the topic in our community or the videos on our channel. 😃