Integrating a Resinq chatbot into your WordPress site can significantly enhance user interaction by providing immediate automated support. This guide will show you two methods to integrate your chatbot: using a plugin for simplicity and a manual method for more advanced customization.
Prerequisites
- Log in to Resinq: Start by logging into your Resinq dashboard.
- Select Your Chatbot: Choose the chatbot you want to embed from your list of chatbots.
- Navigate to the Embed Tab: Click or tap on the Embed tab within your chatbot's settings.
- Copy the Embed Code: In the Web Integration section, find the HTML embed code provided for your chatbot. Click the Copy button to copy this code to your clipboard.
Using a Plugin
To integrate your Resinq chatbot into your WordPress site the easy way, you can use a plugin called Head, Footer and Post Injections. This plugin allows you to add custom code snippets to the header, footer, and post sections of your WordPress site.
Install and Activate the Plugin
Log in to WordPress Dashboard
Navigate to Plugins → Add New Plugin.
Search and Install Plugin
Search for "Head, Footer and Post Injections" and click Install, then Activate.
Add Code Snippet to Head, Footer and Post Injections
Access Plugin Settings
Go to Settings → Header and Footer in your WordPress dashboard.
Insert Code
Scroll down and find the following section:
BEFORE THE </BODY> CLOSING TAG (FOOTER): Paste the previously copied embed code snippet here.
Ensure you click Save to apply your changes after adding the code snippets.
Manual Installation
For more advanced customization and control over the chatbot integration, you can manually insert the chatbot code snippets into your WordPress site's theme using the functions.php file.
Step 1: Prepare Your Child Theme
Create a child theme to maintain customizations when updating the parent theme. Here's how to create a child theme.
Step 2: Add Code Snippets
Prepare Code Snippets
Prepare your code snippets for header and footer injection:
Footer Code Snippet:
// Add custom Resinq footer code
add_action('wp_footer', 'add_jumachat_footer_code');
function add_jumachat_footer_code(){
?>
<!-- PASTE RESINQ EMBED CODE HERE -->
<?php
};Insert into functions.php
Via FTP: Connect to your site using an FTP client and navigate to your child theme directory. Locate the functions.php file.
Via WordPress Admin: Go to Appearance → Theme Editor. Select your child theme from the drop-down menu at the top right and click on the functions.php file in the right-hand sidebar.
Insert Code Snippets
Scroll to the end of the functions.php file. Paste the header and footer code snippets at the end of the file to ensure they are loaded correctly.
// Footer code snippet for Resinq
add_action('wp_footer', 'add_jumachat_footer_code');
function add_jumachat_footer_code(){
?>
<!-- PASTE RESINQ EMBED CODE HERE -->
<?php
};Save your changes in the functions.php file to activate the Resinq chatbot.
Troubleshooting
If you encounter issues while integrating the chatbot into your WordPress site, here are some troubleshooting steps to consider:
Code Placement
Clear Cache
Console Errors
By addressing these common issues, you can resolve many of the typical problems encountered during the chatbot integration process, ensuring a smooth and functional deployment on your WordPress site.
Whether using the plugin method for ease or the manual method for greater control, both effectively integrate your Resinq chatbot into your WordPress site, enhancing functionality and user engagement.