Creating a Script to use the Web Channel
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 thisid
is used by Pushinho in theselector
. attribute. Make sure they are the same, otherwise Pushinho will not work. - The
initPayload
attribute is the text that will be sent to Push'schannelUuid
when Pushinho is initialized. The text ininitPayload
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
andsession
. By default, Pushinho useslocal
mode.local
: The local history persists after the browser is closed, and can be cleared when the browser cookies are deleted, or whenlocalStorage.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 whensessionStorage.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:
- Using a
.css
file to apply any desired styles based on the classes that Pushinho has. - Using customization attributes at app launch. The full list of attributes can be found here.
To use the customization attributes, just add the parametercustomizeWidget
in the script, and within it, use the customization attributescustomizeWidget: {
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.