Function Introduction
After adding a chat plug-in to your independent website, you can automatically reply to visitor messages on your independent website page without jumping to other pages, thereby increasing the chat order rate; not only that, you can also add a drainage component to the chat plug-in, and visitors can jump to the corresponding drainage channel to start a conversation with just one click, thereby achieving the gain effect of drainage marketing and diversion Q&A.
It can be seen that adding a chat plug-in can solve many customer service demand scenarios. This article will explain how to add and edit a chat plug-in.
Operation process
1. Add a chat plugin
In Integration > Click Chat Plugin > Click Add Plugin to enter the edit and add interface.
2. Edit chat plugin
Entering the chat plug-in editing interface, you can see that it is mainly divided into two areas. The left side is the setting area, which includes: style settings, information survey, advanced settings, and portal integration; the right side is the preview area.
When you are editing a chat plug-in in the settings area, you can preview the plug-in style you edited in real time in the preview area on the right, making it easier for you to edit the plug-in.
The following will introduce the contents of each partition of the setting area in detail in conjunction with the preview area.
2.1 Style settings
Style settings: design the style of the plug-in, including plug-in name, chat background box color, avatar, window title, window subtitle, language, plug-in location, etc.;
• Plugin Name: refers to the name of the plugin (only for customer service).
• Theme color: You can customize the main background after the plugin is expanded, as shown in the figure below.
• The merchant logo: refers to the avatar on the left side of the title above the plug-in.
• Robot avatar: refers to the robot’s avatar when replying to visitors.
• Language: You can set the language of the prompts in the plug-in, including the display language of prompts, button names, error feedback, etc.
• Entrance and chat window position: You can set whether the plug-in/sidebar is displayed on the left or right side of the website.
• Dialog window title: refers to the title above the plug-in.
• Conversation window subtitle: It is located below the window title and serves as an auxiliary supplementary description. It can be customized.
The subtitle of the conversation window also supports switching to display the subtitle content based on whether the customer service is online.
• Notice board: You can set up content that customers need to pay attention to, such as preferential advertisements, manual service hours, etc. to be displayed on the notice board. You can also set personalized settings such as the color and content link of the notice board to help you achieve precision marketing.
• Mobile chat display: You can set whether to fill the mobile phone screen when the mobile chat window is expanded.
• Custom icons: There are two types of icons: default icons and selected icons. The default icons refer to the style when the mouse is not hovering over them; the selected icons refer to the style when the user hovers over or clicks the icon. The system comes with a default style, as shown on the left side of the figure below. You can customize two styles.
• Icon size: refers to the size of the chat plug-in displayed on the page. You can set it in three styles: small, medium and large.
• Bottom distance: refers to the height of the plug-in/sidebar from the bottom of the website, which can be set from 0px to 500px.
• Entry icon collapse: By default, the icon is not collapsed, as shown in the upper left corner of the figure below; enable icon collapse and the user can fold the icon; you can set two styles, collapse to a sidebar or collapse to a single icon.
• You can also edit the sidebar text and set separate display styles for PC and mobile.
2.2 Information investigation
Information investigation: By setting up " pre-chat investigation " and " offline information retention ", you can collect the user's name, mobile phone number, email address, etc.
• Pre-chat survey: After you enable the pre-chat survey, your visitors will need to fill in the survey information you set when they open the chat window. Only after filling in the information can they send messages to you;
• Offline information retention: After turning on offline information retention, when there is no customer service online, you need to fill in the survey information you set, and only then can a message be sent to you.
Comparing the two, pre-chat survey tends to require customer information to be left before starting a conversation, while offline information retention tends to be a means of collecting customer information when there is no customer service online.
Both the pre-chat survey and offline information retention support adding up to 4 fields, including email, name, company name, and mobile phone number. You can also set whether it is a required field. Click the cross on the right to delete or adjust the field.
• Leave information button: After it is turned on, a leave information button will appear in the chat window, and visitors can click it to fill in the information.
• Forced pop-up: When turned on, visitors cannot close the information window on their own and are forced to fill in the form (if not turned on, visitors can choose to close it on their own and skip leaving information).
2.3 Advanced settings
You can set the plug-in display settings, and set up unread message previews and conversation transfers to humans, etc.
• Unread message preview: When turned on, when your chat plug-in is not expanded, the first unread message of the visitor can be displayed next to the icon. It can support displaying the first unread message or the latest unread message.
• Plugin display settings: When you install a plugin on your independent website or web page, the plugin will be displayed on all pages of your independent website by default. You can use the display configuration to configure which pages need to display the plugin and which pages do not need to display the plugin. The same applies to mobile terminals.
• Automatically expand: You can set the time after which the chat window will automatically expand after the user enters the website so that the user can inquire about the product immediately, as well as intelligent settings such as automatically opening the chat window for new users.
• Window state: When a visitor closes your website or switches to another website and then returns to your website, the chat plug-in window remains in the previous expanded or collapsed state.
• Transfer to human button: If you have turned on the robot's automatic hosting function, visitors will be received by the robot first. When the visitor received by the robot expands the chat window, a Transfer to Human button will be displayed. The visitor can click it to switch the conversation from the [Robot] state to the [Unassigned] state.
2.4 Entry integration
You can display multiple chat widgets on a web page, including our customer service plug-in, messenger, Line, Whatsapp, Email, etc., which will display the chat widget on the web page below to help you achieve the effect of attracting traffic.
2.5 Save
After editing the chat plug-in, click Save to complete the editing.
3. Install plugins
Once you have set up the plugin, you can install it on your website as follows:
• If you build your site, you can install SaleSmartly on your website through JavaScript code
3.1 Copy code
• In [ Integration] - [Chat Plugin ], select the plugin you want to install from the list and copy its code;
• Or you can view the code by clicking Install to Website in the upper right corner of [ Integration] - [Chat Plugin ] - [ Edit Plugin ].
3.2 Install SaleSmartly on your site
After accessing the server where the site is hosted, find the file containing the tag (usually index, please consult the site's development engineer for details), open the file, paste the JavaScript code before the tag, save the changes and the installation will be successful.
• You can install the plugin on various sites, including Shopline, Shoplazza, Shopify, Shopyy, etc. For details, see:
How to install SaleSmartly on a standalone website
The following shows you how to install SaleSmartly in your ShopLine app store, and the same goes for other independent sites:
;}.cls-2{fill:%230868f7;}.cls-3{fill:url(%23未命名的渐变_44);}.cls-4{fill:%23333;}%3c/style%3e%3clinearGradient%20id='未命名的渐变_8'%20x1='33.73'%20y1='100.61'%20x2='-0.03'%20y2='-1.06'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%237ae9fb'/%3e%3cstop%20offset='0.67'%20stop-color='%232b90f8'/%3e%3cstop%20offset='1'%20stop-color='%230868f7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='未命名的渐变_44'%20x1='27.86'%20y1='18.67'%20x2='68.36'%20y2='22.22'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%235ac7f2'/%3e%3cstop%20offset='1'%20stop-color='%230868f7'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M29,28.74V81.91l-9.51-3.68v0L8.52,74A7.17,7.17,0,0,1,4,67.32V24.54A3.76,3.76,0,0,1,9.08,21Z'/%3e%3cpath%20class='cls-2'%20d='M68.09,78.07a13.15,13.15,0,0,1-17.9,12.06L29,81.91h0V28.74L50.19,37A13.17,13.17,0,0,0,68.08,25.3h0Z'/%3e%3cpath%20class='cls-3'%20d='M68.08,25.3a13.19,13.19,0,0,1-6.73,10.87A13.09,13.09,0,0,1,50.19,37L29,28.74V6A3.76,3.76,0,0,1,34.1,2.52l25.59,9.91A13.22,13.22,0,0,1,68.08,25.3Z'/%3e%3cpath%20class='cls-4'%20d='M129.06,81.76a4.33,4.33,0,0,1-3.19-1.31,4.4,4.4,0,0,1-1.31-3.24V56.86H97.65V77.21a4.36,4.36,0,0,1-1.35,3.2A4.68,4.68,0,0,1,93,81.76a4.32,4.32,0,0,1-3.19-1.31,4.37,4.37,0,0,1-1.32-3.24V27.27A4.58,4.58,0,0,1,89.83,24a4.59,4.59,0,0,1,7.82,3.27V48.15h26.91V27.27A4.58,4.58,0,0,1,125.91,24a4.59,4.59,0,0,1,7.82,3.27V77.21a4.37,4.37,0,0,1-1.36,3.2A4.65,4.65,0,0,1,129.06,81.76Z'/%3e%3cpath%20class='cls-4'%20d='M163.77,81.66c-6.57,0-11.76-1.92-15.44-5.7s-5.54-9.07-5.54-15.74a26.76,26.76,0,0,1,2.09-10.43,17.72,17.72,0,0,1,6.67-8.06,19.15,19.15,0,0,1,10.68-2.95,19,19,0,0,1,10.46,2.8,18.7,18.7,0,0,1,6.55,7.36,22.53,22.53,0,0,1,2.36,10.28A4.51,4.51,0,0,1,177,63.77H152.23a10.8,10.8,0,0,0,3.49,6.65c2,1.68,4.88,2.52,8.66,2.52a22.25,22.25,0,0,0,7.54-1.21c.74-.3,1.55-.67,2.37-1.07a3.75,3.75,0,0,1,1.84-.4,4.09,4.09,0,0,1,3,1.15,4,4,0,0,1,1.12,3,4.38,4.38,0,0,1-2.58,3.82,32.34,32.34,0,0,1-6.36,2.61A28.67,28.67,0,0,1,163.77,81.66ZM172.4,55.9a9.72,9.72,0,0,0-1.63-4.56A9.9,9.9,0,0,0,167,48a10.38,10.38,0,0,0-4.64-1.14,12,12,0,0,0-4.77,1.06,9.54,9.54,0,0,0-4.89,5.66,11.78,11.78,0,0,0-.51,2.3Z'/%3e%3cpath%20class='cls-4'%20d='M193,81.64a4.49,4.49,0,0,1-4.51-4.55V27.28A4.58,4.58,0,0,1,189.84,24a4.48,4.48,0,0,1,3.28-1.36A4.36,4.36,0,0,1,196.35,24a4.46,4.46,0,0,1,1.31,3.31V77.09a4.34,4.34,0,0,1-1.35,3.2A4.67,4.67,0,0,1,193,81.64Z'/%3e%3cpath%20class='cls-4'%20d='M263.79,81.71a5.7,5.7,0,0,1-4.2-1.74,5.76,5.76,0,0,1-1.73-4.19V27.37a4.58,4.58,0,0,1,1.35-3.27A4.59,4.59,0,0,1,267,27.37V72.53h24a4.58,4.58,0,0,1,3.27,7.82A4.66,4.66,0,0,1,291,81.71Z'/%3e%3cpath%20class='cls-4'%20d='M424.48,81.74a4.71,4.71,0,0,1-2.71-.88,5.43,5.43,0,0,1-1-1l-.07-.09-12.41-17-5.41,5v9.44a4.31,4.31,0,0,1-1.36,3.19,4.66,4.66,0,0,1-3.3,1.36A4.29,4.29,0,0,1,395,80.42a4.36,4.36,0,0,1-1.32-3.23V27.37A4.58,4.58,0,0,1,395,24.1a4.52,4.52,0,0,1,6.58.12,4.54,4.54,0,0,1,1.24,3.15V56.31l17.72-16.38.05,0a4.8,4.8,0,0,1,2.94-1.11,4.4,4.4,0,0,1,3.27,1.2,4.57,4.57,0,0,1,1.2,3.27,4.44,4.44,0,0,1-.77,2.33,7.45,7.45,0,0,1-1.43,1.65l-11,9.64,13.34,17.68a5,5,0,0,1,1,2.71,4.12,4.12,0,0,1-1.36,3.24A4.64,4.64,0,0,1,424.48,81.74Z'/%3e%3cpath%20class='cls-4'%20d='M317.93,81.76a21.5,21.5,0,1,1,21.17-21.5A21.37,21.37,0,0,1,317.93,81.76Zm0-34.1a12.61,12.61,0,1,0,12.42,12.6A12.52,12.52,0,0,0,317.93,47.66Z'/%3e%3cpath%20class='cls-4'%20d='M212.18,101.22a4.12,4.12,0,0,1-3.05-1.26,4.17,4.17,0,0,1-1.26-3.1V43.34a4.37,4.37,0,0,1,1.3-3.14,4.26,4.26,0,0,1,3.13-1.3,4.19,4.19,0,0,1,3.1,1.26,4.32,4.32,0,0,1,1.26,3.16,20.77,20.77,0,0,1,13-4.54,21.51,21.51,0,0,1,0,43,20.51,20.51,0,0,1-13-4.57V96.86a4.15,4.15,0,0,1-1.3,3.06A4.5,4.5,0,0,1,212.18,101.22Zm17.43-53.63c-6.23,0-12.93,4.11-12.93,12.72a12.73,12.73,0,0,0,25.46,0A12.71,12.71,0,0,0,229.61,47.59Z'/%3e%3cpath%20class='cls-4'%20d='M365.76,81.76a21.5,21.5,0,1,1,21.18-21.5A21.37,21.37,0,0,1,365.76,81.76Zm0-34.1a12.61,12.61,0,1,0,12.42,12.6A12.52,12.52,0,0,0,365.76,47.66Z'/%3e%3c/svg%3e)