Click on the image below to viewExample Demo↓
Purchase below to get the download code and enter it to unlock the download:
Sold for the use of Elementor Pro (Click to download for free) Popups Online Customer SidebarsTemplateThe sidebar is a great example of how we can help our customers to get the most out of our website, by using Elementor to import the site. Online customer service sidebar is very important, high-frequency display urges customers to contact us quickly to increase the conversion rate. With a click to return to the top function, to improve user experience, traveling at home, a must-have site!
The customer service plugins on the market are already very good, for example we sell theChaty Pro Customer Service PluginIt has been able to meet the needs of the vast majority of people. However, plug-ins also have shortcomings, 1- affect the speed, generally increase 180~300 kb code, including js affect rendering; 2- can not be customized to a high degree, the perfectionist knot.
Elementor Pro now comes with Floating ButtonFeature to import customer service sidebar panels online. Currently only the official version of Key activation can be used, the degree of customization is not high, a lot of restrictions. Support is also very little, for example, does not support WeChat QR code images. Diamo think it is a chicken rib existence, a little help to the little white, to the perfectionist tasteless.
Di I'm OCD, plus a perfectionist, so I do it myself and only use the Elementor Pro Made a few customer service sidebar Popups that are responsive, fast, highly customizable, support WeChat QR codes, and beat Floating Button hands down.
Tips: Made with Elementor Pro + custom code only, no other plugins required. The site must be installed using Elementor Pro, otherwise the sidebar will not work. Please check if it is applicable before purchasing. Each style requires a separate download code!
Click to viewCustomer Service Sidebar ExampleThere are only a few styles for now, and they will be added later. You can use the browser F12 developer tool to view the display effect of portable, tablet and cell phone.Icons and buttons can be customized in shape, color, size, spacing, text content, and background color.
Style 1 because of design problems so microsoft customer service did not put QR code image, only hyperlink. Hyperlink column you can insert the QR code picture URL or set up a click to pop up Popup, which puts the QR code picture, please release your imagination.
About Mobile Responsive:
Responsive ↓, all styles of cell phones are the effect of the following chart, horizontal fixed floating at the bottom of the page, this display effect of the highest conversion rate, the most practical, you need to give the cell phone footer settings padding-bottom:70px; , leaving about 70px of space at the bottom for the customer service bar.
Cell phone can also be changed to the same with the computer on the right side of the hanging display, the custom code inside the separate control of the cell phone style CSS code deleted, and then set up the container inside the elements of the upper and lower alignment of the right side of the alignment on the line.
About the price:
It takes a lot of time and effort to make these sidebars and to provide after-sales service to solve the problems encountered by customers.It's worth at least a couple thousand dollars at the hourly rate we take orders for!
Others also sell this thing, but the beauty, practicality, customizable degree of each aspect is not as good as us, the other party sells 38 dollars. Our price is still very conscientious, and there is a discount for VIP purchase.
Online Customer Service Sidebar Download Terms of Purchase
Virtual products are reproducible and non-refundable once sold, for more information, please go toTerms of ServicePlease log in first before purchasing. Please log in first and then purchase, which style you like to buy which, purchase to get the download code, enter the corresponding style password area click "unlock" to download.
Diamo for the purchase of users to provide after-sales service, plug-in use any questions please leave a message in the comments below, there will be answers to questions.
Installation / Usage
First press the operation import below to activate the sidebar, so that it is displayed in the front-end, and then go to adjust the position and content, etc.. If you adjust it at the beginning, it's not good to troubleshoot what's wrong when the front-end display is abnormal.
You need to set up Elementor first, in Elementor > "Settings" > "Features" settings, enable the following two features. Enabling them will improve the speed and functionality of your website, we have enabled these two settings for all of our sites.
Import template method:
1- Go to the "Popups" section in the backend Elmentor "Templates".
2- Click the "Import Template" button at the top, select the downloaded template, upload the downloaded file and follow the steps to import it.
3- Edit the Popup template you just imported, using Elementor.
4- Click on the arrow next to the "Publish" button and click on "Display Conditions".
Click "Add Condition" to set the display/effective range of the customer service sidebar, this is to set which pages to display this customer service sidebar.
Set the scope of effect (on which pages the sidebar will be displayed) ↓, usually "Entir Site" will be displayed on all front-end pages. Click the "Next" button to enter the next step.
Click the following picture to enable "On Page Load", the time is recommended to keep the default do not change, and then click the lower right corner of the "Save & Close" button to save.
Finally clear all the cache and go to the frontend and refresh the page to see that the sidebar should already be displayed normally.To adjust the position, content, etc. see the tutorial belowThe level of customizability is very high! Be sure to check out the usage/modification tutorial below before modifying.
Online customer service sidebar use/modification tutorial
Pure use of Elementor Pro production, know Elementor know how to change, if you do not know Elementor first go to Baidu to find tutorials a few minutes to learn. Diamo added some custom CSS, each CSS is labeled, a look at what it means to know what to change their own tune line.
Tips: Don't change some of the settings and code if you can't read it or don't know what it means, you might get an error if you do!!!! If you don't know how to do it, just follow the tutorials to fine-tune it, don't let yourself go! Encountering trouble contact WeChat customer service on the right.
In order to minimize the time for big understanding, roughly the main points of modification. Try not to change the default settings, each setting has its own meaning! After the change, timely point to save, go to the front-end to check the effect, out of the problem in the editing interface, press Ctrl + Z (can be pressed several times) to undo the operation (provided that the editing page has not been refreshed), and then save to restore.
Adjust the position of the customer service bar
Press the following picture to enter the setting interface. It is usually displayed in the lower right corner and is well set by default and does not need to be adjusted.
To adjust the margins, adjust them in the way shown below, generally adjusting the spacing between the distance to the right and the bottom as needed.
Change the content of each icon box
Click on the corresponding icon bar widget in the right "Structure" section, and the corresponding content panel will pop up on the left. Modify the icon, text, link, etc. as needed.
Icons and text color, size in the "style" plate inside the adjustment, these are the basic simple operation of Elementor, here but not too much explanation. Pure novice, then it is recommended that the first Baidu Elementor tutorials to learn, you have to be able to use Elementor to create a website.
Adjust icon and text color/size
Click in the order shown below to find the Modify Icon and Font Color and Size locations.
Modify icon panel/button background color, text box color, triangle shape color
Style 1:Computers, handhelds, tablets, and cell phones are all modified in the same location:1- Click to select the Icon Gallery widget you want to modify, 2- Switch to the "Advanced Settings" panel and modify the "Color" in the "Background" field.
Style 2 + Style 3 + Style 4:Computer, mobile and tablet colors can be changed by CSS code: click in the order of the picture below and expand the "Custom Css" column.
Style 2 in the "Custom Css" in about 26 and 35 lines to find the color code, put the #b51717 Just replace the color code with the one you want. Replace only the color code, do not change anything else! Color codes start with a # number, usually followed by 6 numbers.
Newbie don't know how to view a certain color code? Baidu find the answer in 10 seconds.
The color code for style 3 is in the "Custom Css" on lines 35 and 62, and for style 4 on lines 26 and 53.
Style 2 + Style 3 + Style 4:Mobile icon box color code set in the following position, with style 1 to modify the color of the same way, replace the color on the line. Because the mobile terminal is to add the background color of the entire icon board, while the computer terminal and so on is only to set the background color of the icon and text box, so the setting method is not the same.
In addition to styles 1 and 5, other styles in front of the text box has a triangle arrow pointing to the right, you also need to change its color, also in the "Custom Css" inside the change.
Style 2:Presumably, the following code is found at line 53, theclassifier for objects with a handle #b51717 Just replace the code with the color you want.
Style 3:Find the following code, roughly at line 81.classifier for objects with a handle #b51717 Just replace the code with the color you want.
Style 4:Presumably, the following code is found on line 71.classifier for objects with a handle #b51717 Just replace the code with the color you want.
Modify lines between icons
Some styles of icons between the box has a line interval (green box below), to modify the color in accordance with the following method.
Expand the "Custom Css" column by clicking on it in the order shown below.
Style 3: InIn the "Custom Css" fieldAbout 53 lines in. Find the color code.classifier for objects with a handle #ffffff69 Just replace the color code with the one you want. Replace only the color code, do not change anything else! Color codes start with a # number, usually followed by 6 numbers.
Newbie don't know how to view a certain color code? Baidu find the answer in 10 seconds.
Style 4: Find the color code in the "Custom Css" section, around line 44.
Modify icon button size
The size is modified by customizing the CSS by clicking in the order shown below to expand the "Custom Css" column.
Style 1:Probably in the 14th and 15th lines to find the following code, modify the two numbers 6 on the line, change to a larger number of icon box will be larger, only change the number of other do not change! Modified 2 numbers must be the same to work, so that the icon will be symmetrical up and down.
Style 2:Probably in line 28 to find the following code, change 12 to some other number on the line, change to a larger number icon box will be bigger.Change only the numbers and nothing else!
Style 3:Probably find the code below in lines 37 and 38, 48 is the icon width and 45 is the height. Just change the numbers, change it to make the icon box bigger for bigger numbers.Change only the numbers and nothing else!
Style 4:Modify the method with style 3 aboveequal toIt's probably in theLines 28 and 29 find the code below.
Replace WeChat QR code image
Picture size is recommended to do 100*100px, 4 weeks set white border, so it looks better. Below is a sample image for reference only.The microsoft QR code image is first uploaded to the media library and then the image URL is copied.
Click the numbers in the order of the following figure, the left side will pop up the following settings panel, directly replace the text and URL on the line. Note: Please operate carefully to avoid deleting anything by mistake! Replace only the text and URL, pay attention to the format. Wrap the URL's ""Symbols cannot be deleted!
If the left side of the panel is too narrow, put the mouse to the edge of the side panel, the left mouse button click and drag to the right can be widened panel. Remember to zoom back in when you're done, the panel is too wide for subsequent operations.
Replacement of email, WhatsApp number
Replace the mailbox:Click on the number 1 icon box below and in the red box position below, just replace the email address only.
Replace the WhatsApp number:Click on the number 1 icon box below and replace the 11-digit number beginning with 138 with your 11-digit cell phone number in the red box below. 86 is the international number.The area code represents the number of China.It cannot be deleted. If you are using a foreign cell phone number, just change 86 to the corresponding country area code.
Add/Delete Icon Buttons (Customer Service)
According to the following method, mouse over the icon box to be modified, click the right mouse button to pop up the tab, you can realize the function of adding, deleting and so on.
For example, if you want to add a new Skype customer service button, copy the WhatsAPP icon box, replace the icon and display name, and there in the link field enterskype:XXX?chat You can do this by replacing XXX with your Skype account number (below). Be sure to test it after setting it up!
More functional shortcodes:
skype:XXX?chat: start Skype text chat
skype:XXX?userinfo: view Skype profile
skype:XXX?add: add to Skype contact list
skype:XXX?call: start Skype voice call
skype:XXX?voicemail: send voicemail with Skype
skype:XXX?sendfile: Send a file using Skype
Adjust icon box spacing
To adjust the distance between the icon boxes, find the adjustment position as shown below. It is recommended to adjust only the style 1 and style 2 spacing, the icon box spacing for styles 3 and 4 should remain at the default of 0, otherwise there will be gaps.
Adjust the icon bar border on mobile
On the mobile side, starting with the second icon box, a 1px left border was added with a white color, and the other computer sides and such have 0 borders.
Click on the numbers in the order shown below to find the location of the modification and adjust as desired.
