Creating a Script to use the Web Channel

Paulo Bernardo Updated by Paulo Bernardo

Requirements

  • After creating a web channel following this documentation, it is necessary to have the uuid of the channel to integrate with Pushinho v2

Example Script

<html>
    <head>
        <script src="https://storage.googleapis.com/push-webchat/widget-latest.js"></script>
    </head>
    <body>
        <div id="webchat"/>

        <script>
            WebChat.default.init({
                selector: "#webchat",
                initPayload: "Hello", 
                channelUuid: 'cf3d62bc-5cab-4561-a96b-3abed4e5be44',
                host: 'https://new.push.al',
                socketUrl: "https://socket.push.al",
                title: "Title",
                subtitle: "Subtitle",
                inputTextFieldHint: 'Type a message...',
            })

            WebChat.open()
        </script>
    </body>
</html>

Important details

  • The <div id="webchat"/> is mandatory, and this id is used by Pushinho in the selector. attribute. Make sure they are the same, otherwise Pushinho will not work.
  • The initPayload attribute is the text that will be sent to Push's channelUuid when Pushinho is initialized. The text in initPayload can be used as a trigger to start a flow in Push, and with that, send a welcome message to the user.
  • At the end of the script the WebChat.open() method is called, it is responsible for expanding the chat
  • Pushinho uses Markdown to show messages, make sure the Markdown syntax is correct, otherwise the text will be formatted incorrectly.

Default Parameters

  • Some parameters, if not specified, have a default value defined by Pushinho, having as main:
    • socketUrl: 'https://socket.push.al'
    • host: 'https://new.push.al'
    • tooltipDelay: 500
    • storage: 'local'
  • More parameters can be found here.

Dealing with chat history

  • Pushinho has 2 strategies for saving the chat history, they are local and session . By default, Pushinho uses local mode.
    • local : The local history persists after the browser is closed, and can be cleared when the browser cookies are deleted, or when  localStorage.clear() is called.
    • session : The session history persists when the page is reloaded, but is deleted when the browser, or tab, is closed. The session history can also be deleted when  sessionStorage.clear() is called.
  • To use session mode, add this attribute:
    params: {
        storage: "session",
    },

Showing the tooltip

  • To show the user a tooltip, simply add the tooltipMessage attribute with the desired message.
    tooltipMessage: "tooltip message",
  • A delay can be applied to show the tooltip, the tooltipDelay attribute is responsible for this, and comes with a default value of 500ms.
    tooltipDelay: 30000, // Delay count at milliseconds

Customizing Pushinho

  • Pushinho can be customized in 2 ways:
  1. Using a .css file to apply any desired styles based on the classes that Pushinho has.
  2. Using customization attributes at app launch. The full list of attributes can be found here.
    To use the customization attributes, just add the parameter customizeWidget in the script, and within it, use the customization attributes
    customizeWidget: {
        headerBackgroundColor: "#FFC0CB",
        launcherColor: "#FFC0CB",
        userMessageBubbleColor: "#FFC0CB",
    }

Pushinho's Profile Image

  • Three attributes are responsible for the profile image
    • profileAvatar : Responsible for the image that will appear in the header next to the Title, and within the chat along with the messages sent by the bot.
    • openLauncherImage : Responsible for the image that will be shown in the Pushinho launcher, while the chat is closed.
    • closeImage : Responsible for the image that will be shown in the Pushinho launcher, while the chat is open.

Available Methods

  • Some methods are available and can be used to interact with Pushinho, some of them are:
    • WebChat.toggle() : Used to open and close the chat.
    • WebChat.open() : Used to open the chat.
    • WebChat.close() : Used to close the chat.
  • The list of all methods can be found here.

How did we do?

Adding a Web channel

Adding Viber channel

Contact