Installing the Widget Code on Popular CMS and Website Builders
This section will tell you how to add the 13Chats widget code to popular CMS and website builders without a developer.
How to install 13Chats widget code on Tilda
Mind that you can only add the online chat widget in paid accounts. To add an online chat widget to your website, log in to Tilda, open the block library, go to the “More” section, and select block T123 “HTML code.”
In the edit mode, paste the script code into the block and click “Save and Close.”
In edit and preview modes, you can see the script in text. To get it working, click Publish in the upper right corner of the page.
How to install the 13Chats widget code on Wix
To add an online chat widget to your site, log in to Wix, go to the site editing panel, go to the “Insert Code” section and select “Insert Widget.”
Don’t worry if you have a free plan — you can still add the code.
Click on the “Insert Code” button above the iframe, add the code to the window, click “Update,” and close the HTML settings window.
Align the HTML element to the site’s width, align the block height, and click “Publish.”
The next step is to create custom scenarios to reach out to users at the right time with the most appropriate message.
How to install 13Chats widget code on WordPress
- installation of the code through the “Widgets” menu;
- installation via the theme template file footer.php;
- installation via FTP;
- installation via the functions.php file of the WordPress theme (template).
Choosing the method depends on the website’s characteristics and your preferences. If the 13Chats script does not work after installation, it breaks down with third-party scripts, or the website is overloaded, we recommend using methods 3 and 4. They reduce the load since they allow you to avoid accessing the website’s database.
Let’s take a closer look at each of them.
Installing the 13Chats widget code on WordPress via the “Widgets” menu
Copy the widget code in the project settings on the “Install Code” tab. Log in to the site administration panel, hover your mouse over the “Appearance” item in the left menu and select the “Widgets” tab.
Select HTML Code from the list of available widgets and click “Add Widget.”
Add the code to the window and click “Save.”
After that, the widget will appear on all pages of the site.
Installing the 13Chats widget code on WordPress via the footer.php theme template file
Copy the widget code in the project settings on the “Install Code” tab and go to your website’s administration panel. In the left menu in the “Appearance” section, select the “Theme Editor” tab.
On the right side of the list of theme files, select “Footer (footer.php).”
Installing WordPress theme (template) via functions.php file
Log in to your WordPress site admin panel and select “Appearance — Theme Editor.”
In the upper right corner, select the main website theme to change:
In the list of theme files, select “Theme Functions (functions.php).”
Scroll through the contents of the file and add the following code to the end:
add_action('wp_enqueue_scripts', 'chats_widget_init');
function chats_widget_init() {
wp_enqueue_script('loader', 'https://widget.13chats.com/assets/loader.js', false, null, true);
}
add_filter('script_loader_tag', 'add_attribs_to_scripts', 10, 3);
function add_attribs_to_scripts($tag, $handle, $src) {
$chat_params = array('loader');
if (in_array($handle, $chat_params)) {
return '<script src="'.$src.
'" data-chats-widget-id="7a2d5c74-1ffc-46ce-a3c1-214542896466" async type="text/javascript"></script>'.
"\n";
}
return $tag;
}where data-chats-widget-id is the unique widget code in your project. To get it, log in to 13chats.com, open the settings for the corresponding project and copy the code on the “Install Code” tab.
Click Update File.
Installing 13Chats widget code on WordPress via FTP
Copy the widget code in the project settings on the “Install Code” tab. Go to your website hosting or connect using an FTP client and open the footer.php file.
File path: wp-content/themes/your template name/footer.php.
How to install 13Chats widget code on OpenCart
There are two ways to install the online chat widget on all pages of the site:
- through the admin panel;
- via FTP.
Let’s take a closer look at both options.
Installing the 13Chats widget code on OpenCart 1.5.x through the admin panel
The 13Chats online chat script meets Google’s code placement requirements so that users can past into a cell designated for Google Analytics code. You can place both codes in it or just the 13Chats script — this will not affect the site’s performance in any way. But we do not recommend adding other third-party codes to the field to prevent a conflict.
To find the desired cell, log in to the site’s administrative panel and in the main menu on the “System” tab, select the “Settings” section.
Select the “Edit” button on the right.
Scroll down the page and find the “Google Analytics Code” field. Copy the code of the 13Chats widget in the project settings on the “Install code” tab, paste it in the field instead of or after the Google Analytics code and click “Save” to save the changes.
Installing the 13Chats widget code on OpenCart 2.x via the admin panel
In the new version of the CMS, you can also install the script in the Google Analytics code cell. Placing both codes or just the 13Chats script in it will not affect the site’s performance in any way. We do not recommend adding other third-party codes to the field to avoid conflict.
In the side menu under Extensions, select Extensions.
Select the “Analytics” extension type.
Activate the extension by clicking on the green button with a “+” inside.
Click the “Edit” button next to your site.
Copy the 13Chats widget code in the project settings on the Install Code tab, paste it into the Google Analytics Code field, select the Enabled status and click the Save button.
Installing 13Chats widget code on OpenCart via FTP
Copy the widget code in the project settings on the “Install Code” tab. Go to your website hosting or connects an FTP client and open the footer.twig file.
File path: /catalog/view/theme/your template name/template/common/footer.twig.
How to install 13Chats widget code on Joomla
There are three ways to install an online chat widget on your website:
- through the creation of a new module;
- through the template manager;
- through FTP.
The first two options are suitable for Joomla 2.5+, via FTP you can add code regardless of the CMS version.
Installing the 13Chats widget code on Joomla 2.5+ by creating a new module
Log in to the administrative panel of the site. On the “System” tab in the top menu, select “Global Configuration” (in earlier versions, “Site” — “My profile”).
On the Global Configuration tab, find the Default Editor item and select Editor — None. Click “Save.”
Next, in the top menu on the “Extensions” tab, select the “Modules” item.
Click on the “New” button.
Select the module type HTML code.
Freely name the module in the Title field.
Copy the code of the 13Chats widget in the project settings on the “Install Code” tab and paste it into the field to display arbitrary HTML code on the site.
Customize the display of the widget in the right menu:
- hide the title (“Title” – “Hide”);
- select the position of the module on the page in the footer (“Position” – “footer”);
- publish (“Status” – “Published”);
- open access to the widget for all site visitors (“Access” – “Public”).
Click “Save.”
Installing the 13Chats widget code on Joomla 2.5+ through the template manager
Log in to the admin panel of the site. In the top menu on the “Extensions” tab, select “Templates.”
Click on the template’s name. Next to it, there is an asterisk in the “Default” column and the value “Default for all pages” in the “Pages” column.
Select the index.php file.
Installing 13Chats widget code on Joomla via FTP
Copy the widget code in the project settings on the “Install Code” tab. Go to your website hosting or connect using an FTP client and open the index.php file.
File path: /templates/your template name/index.php.
How to install 13Chats widget code on Ecwid
The option is available only in paid plans of the Venture tier and higher.
If you understand all the risks and are ready to use this method, log into your Ecwid account and select the “Website” tab on the dashboard.
Scroll down to the “SEO Settings” section, find the “Header meta tags and site verification” block and click on the “Add Code” button.
Copy the script of the 13Chats widget in your account (we described how to get the widget code), paste it into the field, and click “Save”.
How to set widget code 13Chats on SpreadSimple
Important: the script of the 13Chats widget can be added only in the paid Pro-plan SpreadSimple.
Also, for correct operation, you will need a paid plan (Standard and higher) in the 13Chats: SpreadSimple service is designed so that the widget code is first installed on the main constructor domain (https://app.spreadsimple.com/…) for preview, and then on the user site (https://site.spread.name/) created in SpreadSimple. Because of this, the limit of one domain is exceeded, which is valid in the free plan 13Chats.
Upgrade your pricing plan and start installing.
To add an online chat widget and other 13Chats tools to your site, log into your SpreadSimple account and select the “Manage options” option for the website where the code will be installed.
In the left vertical menu, select the Settings tab…
…and click Inject custom code.
Now you can evaluate the display of widgets in the preview window.
If the display matches the project settings you specified, publish the changes by clicking the Publish button.
How to install 13Chats widget code on Webflow
Important: the 13Chats widget script can only be added in paid Webflow plans.
To add the 13Chats widget code to the site, log into your Webflow account and open the settings of the corresponding project. Click on the three dots …
… and select Settings.
Go to the Custom Code tab in the top menu.
Copy the 13Chats widget script in your 13Chats account (use our detailed guide on how to get the widget code for installation), paste the code into the Footer Code field, and click Save Changes.
Publish your project to make the 13Chats widgets displayed on your website. To do this, click on the Publish button in the top menu, use the checkbox to mark the corresponding project, and confirm the posting by clicking the Publish to Selected Domain button.
Check the changes by following the quick link to the website.
Updated: 02.02.2022
Loading...