LeadConnector Chat Button Integration
November 18, 2024 ยท AI Conversations
### Step 1: Get the LeadConnector Chat Widget Code
1. **Log in** to your LeadConnector dashboard.
2. Navigate to **Settings** > **Chat Widget**.
3. Configure your chat widget if you haven't already.
4. Copy the generated **JavaScript code snippet** provided by LeadConnector.
### Step 2: Add the Chat Widget Code to WordPress
1. **Log in** to your WordPress admin dashboard.
2. Go to **Appearance** > **Theme File Editor**.
3. Open the `footer.php` file or go to **Appearance** > **Customize** > **Additional CSS/JS** (if available).
4. Paste the LeadConnector chat widget script just before the closing “ tag:
<!-- LeadConnector Chat Widget -->
<script>
// Paste your LeadConnector code here
</script>
5. Click **Update File** to save changes.
### Step 3: Create a Custom Button to Open the Chat
To trigger the chat widget from a custom button:
1. **Add Custom JavaScript**:
– Go to **Appearance** > **Theme File Editor** or use a plugin like **WPCode** for adding custom scripts.
– Add this script in the header or footer section:
<script>
// Check if LeadConnector chat widget is loaded
function openLeadConnectorChat() {
const lcChatWidget = document.querySelector('.lc-chat-widget'); // Replace with the actual widget selector if different
if (lcChatWidget) {
lcChatWidget.click(); // Simulates a click to open chat
}
}
</script>
2. **Create a Button in WordPress**:
– In your page editor (Gutenberg, Elementor, etc.), add a **Button** block.
– Set the button's attributes:
<button onclick="openLeadConnectorChat()">Chat with Us</button>
3. **Save and Test**:
– Preview the page, and click the button to ensure the LeadConnector chat widget opens correctly.
### Optional: Use a Shortcode (For Reusability)
1. Add this code to your **functions.php** file (or via a custom snippets plugin):
function leadconnector_chat_button() {
return '<button onclick="openLeadConnectorChat()">Chat with Us</button>';
}
add_shortcode('leadconnector_chat', 'leadconnector_chat_button');
2. Now, use `[leadconnector_chat]` shortcode in your pages or posts to display the chat button.
This setup ensures your chat widget works seamlessly with a custom button, enhancing user engagement on your WordPress site.