LeadConnector Chat Button Integration

User
Leadconnector chat system in wordpress intengration and allow open it from custom button click
Assistant
To integrate **LeadConnector's chat system** into your **WordPress site** and allow it to open from a custom button click, follow these steps:

### 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.

Leave a Comment

Your email address will not be published. Required fields are marked *