Client communication with the call center has long extended beyond telephone calls — now it includes messengers, email, and other channels. However, sometimes searching for the right communication method turns into a “quest” for the client, which does not contribute to a positive impression. And managers, on their part, have to work in several applications at once. As a result, there are lost inquiries and a decrease in customer loyalty. In this article, we will look at how, with the help of “Oki-Toki: e-commerce call & chat,” you can combine calls and messengers in a single widget.
What is Oki-Toki: e-commerce call & chat?
Oki-Toki: e-commerce call & chat is an omnichannel widget on your website that combines communication channels. The main advantages:
- All in one — customers no longer need to search the website for a way to get in touch, they can write or call from any web page in one click;
- Easy installation — the connection takes 10–15 minutes. You just need to insert the code on the site;
- Branding — choosing the color, location, adding a logo, and setting up welcome messages;
- Convenience — the widget works on phones, tablets, and computers;
- Integrations — support for popular messengers.
Preparing to install the widget
Before installing the widget, you need to configure external resources and communication channels. This will ensure the correct operation of all functions on the website.
Configuring voice communication
First, you need to prepare resources for calls in the Oki-Toki system:
- Web Call — customers can make a call directly from the website via the browser. For this, a virtual number is created, the call route and agent queue are configured.
- Get Call — call request. The customer leaves a request, and the system connects them with an agent at the specified time. When configuring, dialing rules, waiting time, and distribution of requests between agents are set.
How to connect Web Call and Get Call – in a separate article.
Connecting communication channels
Next, additional ways of communicating with clients are set up. In Oki-Toki, this includes:
- Messengers (WhatsApp, Facebook, Telegram, Instagram, Viber) – to connect integrations, you need to go through authorization, get API keys, and set up message processing.
- Email — E-mail (IMAP/SMTP) is connected.
After configuring all the channels, you can proceed to the widget in the system and its integration on the site.
How to connect the widget?
The widget can be set up in the “External resources” section — here, the preset channels are linked and customized: voice, messengers, and email. This ensures convenient and unified communication with clients.
Main settings
Choose from the list of external resources “Oki-Toki: e-commerce Call & Chat”, specify the name and create a new integration.
In the “Website Domains” row, you need to enter the URL of the web page where the widget will be placed. There may be one or several, separated by a comma. For testing the widget within the service, it’s necessary to specify the domain of the Oki-Toki admin area.
The next step is adding communication channels to the widget, using the dropdown lists.
Enter text in the field on the right to add a description.
Example: “Do you have questions? Call us from the website — agents are already waiting!”
This text will be displayed below the channel name.
Important! The channel name is set when connecting the integration and is not editable in the widget settings. To change it, corrections need to be made in the integration itself.
To change the order of communication channels in the widget, drag the item while holding the icon with three dots next to its name.
Using the activity switch, you can disable irrelevant channels. There’s no need to unbind the integration for this. Slide the toggle to the “off” position and the item will not be displayed in the widget.
After setting up and activating channels, you can move on to customizing the widget to fit the interface of your website.
Personalizing the widget in Oki-Toki
To make the widget reflect the company’s style and fit into the website interface, it’s necessary to adjust the appearance — design, color, text, and positioning of elements.
Text in the widget
This section sets the text captions that are displayed inside the widget. All fields are editable — you can use standard options or your own formulations that match the company’s style.
Setting fields:
- Title — the main text displayed at the top of the widget. Usually, it’s the name of the company or service;
- Description — a brief message explaining the purpose of the widget or welcoming the client;
- Or — text separating alternative ways to switch to a communication channel. For example, to open a Telegram from a mobile device, not from a browser;
- Send — label on the button to send a form or message;
- Open — text of the button to open a channel;
- Back to menu — return to the list of channels;
- QR Code — caption accompanying the QR code in the widget interface;
- QR Code hint — explanation under the QR code to inform the user (how to use it);
In the “Text in the widget” section, you can adapt the interface to the corporate style and tone of the company’s communication.
Settings for insertion on the site
You can set the parameters for displaying the widget on a web page in the “Site insertion settings” section. For example, the position of the widget on the site, appearance, colors, margins, teaser message, etc.
Setting fields:
- Location — placement of the widget on the site: top right, bottom left, etc.
- Margins set the distance from the edges of the screen to the widget. Values are accepted in pixels (px);
- Icon in the switch — selection of the type of icon display:
- Static — uses the logo of the first active communication channel;
- Animated — icons dynamically change, creating an effect of live movement.
- Teaser — text of a short invitation that appears next to the widget button;
- Teaser appearance — time (in seconds) until the popup message appears after the page loads;
- Display duration — how many seconds the teaser remains visible;
- Link to the icon — path to the image used as the main logo of the widget;
- Main color — background color of the switch button. Can be set manually or selected from the palette below;
- Text and icon color for interface elements inside the button;
- Recommended palettes — ready-made color combinations for quick appearance settings;
- Code for insertion in <body> — automatically generated, depending on the set parameters. It needs to be copied and transferred to the HTML code of the website to activate the widget.
Important! After changing parameters in the “Site insertion settings” section, you need to update the integration code on the web page — otherwise, changes will not take effect.
To check how the widget looks and works, there is a test prototype. It replicates the behavior of the real widget on the site. You can see that all parameters are correct, for example: the display of communication channels, functionality of buttons, and appearance — without making changes to the working site.
Parameters and usage examples
The behavior and appearance of the widget may vary on different devices. In the “Parameters and usage examples” section, there are suitable code examples to fine-tune the widget.
Main parameters:
- Method mount — the main method for initializing the widget on the page. It allows you to set the widget’s position, appearance, text, and behavior in the interface;
- Margin parameters — you can set different margins for mobile and desktop devices;
- Positioning parameters — control the placement of the widget on the screen. For example, to have it located in a corner or shifted as you scroll the page.
You can open and close the widget programmatically, using the available methods, for instance, to dynamically change the widget depending on user actions. Additional settings will help adapt the widget to the design and requirements of the website.
Oki-Toki e-commerce call & chat is a way to collect all communication channels in one interface and personalize it for any website. The ease of integration will ensure effective and convenient communication, reduce the load on agents, simplify handling requests to maintain a high level of customer service.
