How to create a web element using a weblink in Blip Chat

Channels such as Facebook Messenger and Blip Chat support the type of weblink content with special targets: Self, SelfCompact and SelfTall. That way it is possible to display the web page within the conversation itself, without the user having to go out to a browser (if you don't know what a weblink is or what a weblink's target is click here).

This is a very interesting strategy for bots that need to request complex data from users. Imagine, for example, how difficult it is to request from a user, via text only, a set of elements or even a range of dates.

In addition to being difficult to handle all possible date formats, which someone can write, it is very frustrating for the user to enter several characters to set up a complex date.

In this article you’ll learn, step by step, how to create a web page and use it within a Blip Chat conversation, to request a date from the client.

For this example, you will need:

• Web page (HTML, CSS and JS), properly built, with a date picker element (date selector). Click here to download an example page;
• Add a JavaScript script (blip-chat-extension) to allow your page to send content to your bot;
• Public endpoint (with HTTPS), which points to your page; (if you just want to test, use the link: https://blip-weblink-demo.herokuapp.com/);
• A bot that sends the content type Weblink with the link of the page created in step 1 (using one of the targets: Self, SelfCompact and SelfTall).

Step 1: Web page

Create a web page containing the necessary components for your use case. In the example in this article, the web page used contains only a date picker and a submit button. The user must choose a date and then click the send button. When clicking on the button the window will be closed and the date sent to the bot. (Access the example page by clicking on this link).

You can use any component on your web page, but remember that the components must support different browsers (desktop and mobile).

Another important tip is to create more neutral pages, without many colors and effects. This prevents the user from feeling a big difference between all native content (text, images, etc.) and the customized content you are creating.

Step 2: Add the blip-chat-extension script to the page created in the previous step

In addition to presenting content to the client, it will probably also be necessary to exchange information between the web window and the bot. In this case, it will be necessary to use the blip-chat-extension library.

In our example, whenever the user chooses a date and clicks the Send button, the bot should receive a message containing the date chosen by the user. The script fragment below uses the webView object to send a message in the conversation window the moment the customer clicks the Send button.

<script>

    vardatepicker = $('#datepicker').datepicker({

        uiLibrary:'bootstrap4'

    });




    //Carrega webview extensions

    var webView = newBlipChatExtension()




    $('#button').click(function () {

        

        vardate = datepicker.value();

        console.log(date);

        $('#value').text(date);




        //send simple text message. (user can see the messages on windows chat)

        webView.sendMessage(date);




        //finalizar webview

        webView.closeWebView();

    })

</script>

Note: Don't forget to add the script tag that imports the blip-chat-extension package.

<script src="https://unpkg.com/blip-chat-extension@1.0.4" type="text/javascript">

In addition to sending data from the web page to the bot, it is also possible to create a rule that defines when the window can or cannot be closed. In this example, the user cannot close the window until the date is provided. The code below illustrates this process.

//Method that defines rules to close the webview

webView.overrideOnClose(function () {




    if (datepicker.value() != '') {

        //Allows to close the webview

        return true;

    }




    alert('Choose a date before closing the webview');

    

    //Prevents webview closing

        returnfalse;

})

Step 3: Create public endpoint (URL) for your page

In order to be able to use your web page within the bot conversation, you will need to access the page through a public URL. This endpoint must be performed in a secure environment over HTTPS.

For the example in this article, the web page runs at the URL: https://blip-weblink-demo.herokuapp.com/.

Step 4: Create a bot that sends a weblink

Finally, for the user to receive a web page, it is necessary to send a Weblink content type. To do this, access your bot, select the Builder, choose a block and add Weblink content.

Click this link to download a bot flow that sends a weblink.