Friday , August 6 2021

How to install and use Chatra

Do you still provide phone support? Have you ever thought about the effectiveness of live chat for your website? While most people avoid phone conversations and do not have time to read emails, live chat can be a perfect option to provide effective support and build relationships with their visitors. Can you forget about anything "you could write your email to phonetically?" And give quick answers to burning requests. Live chat saves you time, provides a broader view of your visitors, increases customer loyalty and reduces the stress caused by phone calls.

What is Chatra?

Chatra is an easy-to-use messaging tool for websites that allows you to quickly assist website visitors and create lasting relationships with them. Chatra gives you the ability to effectively fight the abandonment of the shopping cart and avoid costly delays that are common for email support and are so critical in the competitive business environment. And their mobile apps let you help visitors even when you're away from the office.

How to add it to your website

To add Chatra to your website, you need to register on their website in the top right corner, verify your Chatra account via the link sent to your email address and set the password in the Chatra dashboard.

Manual addition of the code

You can copy the widget code from the Configure tab and customize it in the dashboard and paste it into your website's code, preferably before closing label.

Chatra is integrated with most CMS platforms such as Shopify, WordPress, Joomla, Drupal, Wix, etc. You can consult all the guides for the most popular systems here.

Plugin for WordPress

Chatra has its own WordPress plugin so you can easily add it to your website. Follow the steps below if your website is based on WordPress:

  1. First, log in to your WordPress admin panel and go to Plugins → Add new.
  2. Enter "chatra" in the search plugin field.
  3. Install and activate the plugin.
  4. Go to Settings → Chat Chat.
  5. Access in another browser tab and copy the widget code from the configuration and customization section in the Chatra dashboard.
  6. Return to the WordPress console, paste the code and press Save Changes.
  7. Done! Chatra should appear on your website.

It may happen that you do not see the widget after all the previous steps have been taken. In this case, check if caching plug-ins are installed. The widget should appear after clearing your website's cache.

Shopify App

As you may know, Shopify is an extremely popular CMS for online stores around the world. Chatra offers ready-to-use integration with this platform, so you can add Chatra to your online store in one click. You can go to the Chatra app page on Shopify and press the green "Get" button there. There! Chatra is on your website. You can use the same Chatra account to connect another Shopify store. To do so, log in to the store administrator's dashboard and repeat the first step.

Other platforms

Chatra is integrated with most of the popular CMS platforms such as Bigcommerce, CS-Cart, Drupal, Ecwid, Joomla, Magento, Opencart, Tilda and Wix. If you can not find the guide for your platform on the Chatra website, check if you have an option to add custom HTML codes to your website or contact Chatra for help.

Using the API

Once the installation is complete, most of the settings (such as widget texts, button colors and location, etc.) can be changed from the dashboard to and changes will be applied to the widget on your website in real time. But Chatra also offers an API for developers, with basic functionality also available on the free plan. Let's take a closer look at some of their features.

Changing colors

Chatra's dashboard allows you to change only the colors of the chat button and you can choose only one of the colors from the palette.

With the API code below you can set your colors not only for the chat button but also for message bubbles.

window.ChatraSetup = {
colors: {
buttonText: & # 39; # f5f5f5 & # 39 ;, // text chat / icon color of the icon
buttonBg: & # 39; # 5ece1a & # 39 ;, // background color of the chat button
clientBubbleBg: & # 39; # e7ffd1 & # 39 ;, // color of the visitor message bubble
agentBubbleBg: & # 39; # deffff & # 39; The color of the message bubble of the agent

Add this code before the main widget's code (or in the theme.liquid file, if you're using Shopify), and overwrite the settings from the Chatra dashboard. It's also convenient if you have several websites with different color palettes.

Change the size

If you think the button or chat window is too big or too small for your website, change their size with this code:

window.ChatraSetup = {
chatWidth: 400,
chatHeight: 550,
button Size: 75

This code goes even before the main widget's code.

Language setting

Chatra is currently available in 7 languages: English, German, French, Spanish, Russian, Portuguese and Dutch. If multiple languages ​​are selected in the settings, Chatra detects the language of the visitor's browser and shows them the corresponding version.

The use of the API, however, allows you to set the language on your side, so the browser language will be ignored. It allows you to have the chat window always in English on the English version of your website, in German on the German version, etc. To set the language, use this code:

window.ChatraSetup = {
language: & # 39; fr & # 39;

& # 39; Fr & # 39; in the above code stands for French. Other possible linguistic variables: "en", "de", "es", "nl", "pt" and "ru". Chatra also allows you to translate widget texts into other languages ​​that are not currently supported (for example, from English to Japanese). Check their documentation to translate the widget here.

Note that window.ChatraSetup it can only be used once on the page, so if you use different API options, be sure to merge all the options into a single object.

Connect Chatra to your custom button

If you want to open the chat window with a click on your custom button, use this code:

Basically, it's a ready-to-use code that you can place anywhere on the page. If you already have a designed button, add the "Chatra (& # 39; openChat & # 39 ;, true)" setting to it. This way you can have an additional chat button on your page that can be placed in the header, in the footer, on the shopping cart page or wherever it may be useful.

If you only you want to use your button and to hide the default one, use this CSS code:

#chatra: not (.chatra - expanded) {
visibility: hidden! important;
opacity: 0! important;
pointer-events: none;

Add it to your CSS file or wrap it in