WordPress Integration

Use Prodact.ai SDK in your WordPress site with our official plugin.

Installation

Method 1: Upload Plugin

Download the WordPress plugin from your Prodact.ai dashboard
Go to WordPress Admin → Plugins → Add New
Click "Upload Plugin"
Choose the ZIP file
Click "Install Now" and then "Activate"

Method 2: Manual Installation

# Copy the plugin to your WordPress installation
cp -r wordpress-plugin /path/to/wordpress/wp-content/plugins/prodact-sdk

Then go to WordPress Admin → Plugins → Find "Prodact.ai SDK" → Activate

Configuration

1. Get Your SDK Key

Log in to your Prodact.ai Dashboard (opens in a new tab)
Go to Settings → SDK Keys
Create a new SDK key or copy an existing one

2. Configure Plugin

Go to Settings → Prodact.ai SDK in WordPress Admin
Enter your SDK Key
(Optional) Configure API URL if using self-hosted
Enable chat widget and choose position
Click Save Changes

Usage

Automatic Chat Widget

Once configured, the chat widget appears automatically on all pages (if enabled).

Shortcode

Add the chat widget to specific pages or posts:

[produck_chat]

With custom position:

[produck_chat position="bottom-left"]

Gutenberg Block

Edit any page/post
Click "+" to add a block
Search for "Prodact Chat"
Add the block
Configure position in block settings

Action Mappings

Map Prodact.ai operations to WordPress actions to enable interactive features.

Setting Up Actions

Go to Settings → Prodact.ai SDK
Scroll to Action Mappings
Click Add Action
Configure:
- Action Key: Operation key from Prodact.ai dashboard (e.g., act_contact_form)
- Action Type: What happens when triggered
- Target: CSS selector, URL, or JavaScript code

Action Types

Show Element

Shows a hidden element on the page.

Action Type: Show Element
Target: #contact-modal

Hide Element

Hides a visible element.

Action Type: Hide Element
Target: .promo-banner

Scroll To

Smooth scrolls to an element.

Action Type: Scroll To
Target: #pricing-section

Redirect

Navigates to a different page.

Action Type: Redirect
Target: /contact-us

Custom JavaScript

Executes custom JavaScript code.

Action Type: Custom JavaScript
Target: jQuery('#myModal').modal('show');

Example Configurations

Show a Contact Modal:

Action Key: act_contact_us
Action Type: Show Element
Target: #contact-modal

Scroll to Pricing:

Action Key: act_view_pricing
Action Type: Scroll To
Target: #pricing

Add to Cart (WooCommerce):

Action Key: act_add_product
Action Type: Custom JavaScript
Target: jQuery('[data-product-id="123"]').click();

Book a Demo (Calendly):

Action Key: act_book_demo
Action Type: Custom JavaScript
Target: Calendly.initPopupWidget({url: 'https://calendly.com/your-link'});

Developer Hooks

Register Custom Actions in Code

// In your theme's functions.php
add_action('wp_footer', function() {
    ?>
    <script>
    // Add custom action handler
    if (window.produckActions) {
        window.produckActions['act_custom'] = function(payload) {
            console.log('Custom action triggered', payload);
            // Your custom logic here
        };
    }
    </script>
    <?php
});

Access SDK Instance

The SDK instance is available globally in JavaScript:

// Check if SDK is ready
if (window.produckSdk) {
    console.log('SDK is ready');
}
 
// Register action programmatically
window.produckSdk.registerAction('act_myaction', function(payload) {
    alert('Action triggered!');
});
 
// Send a message
window.produckSdk.sendMessage('Hello').then(response => {
    console.log('Response:', response);
});

Filter Hooks

// Modify SDK configuration
add_filter('produck_sdk_config', function($config) {
    $config['customOption'] = 'value';
    return $config;
});
 
// Modify actions before registration
add_filter('produck_sdk_actions', function($actions) {
    $actions['act_custom'] = [
        'type' => 'custom_js',
        'target' => 'console.log("Custom action")'
    ];
    return $actions;
});

Testing Your Setup

1. Visual Check

Visit your website
Look for the chat widget in the corner
Click to open it

2. Console Check

Open browser DevTools (F12) and look for:

Prodact.ai SDK initialized

3. Network Check

Open DevTools → Network tab
Type a message in chat
Look for requests to your API endpoint
Verify status is 200

4. Test an Action

Configure an action (e.g., show modal)
Open chat widget
Type a message that should trigger it
Verify the action executes

Troubleshooting

Chat Widget Not Appearing

Check SDK Key:

Go to Settings → Prodact.ai SDK
Verify SDK key is entered correctly
Make sure "Enable Chat Widget" is checked

Check Console:

Open browser DevTools (F12)
Look for JavaScript errors
Common issues:
- "Prodact.ai SDK not loaded" - Bundle file missing
- "Failed to create session" - Invalid SDK key
- CORS errors - API URL configuration issue

Check File Permissions:

ls -la wp-content/plugins/prodact-sdk/assets/js/
# Should see produck-sdk.bundle.global.js

Actions Not Triggering

Verify Action Keys Match:

Action key in WordPress must exactly match Prodact.ai dashboard
Check for typos, case sensitivity

Check Target Elements Exist:

// In browser console
jQuery('#your-target').length
// Should return 1 or more

Enable Debug Mode:

// Add to browser console
window.produckSdk.on('action', function(actionKey, payload) {
    console.log('Action received:', actionKey, payload);
});

WooCommerce Integration

For WooCommerce actions:

// Add product to cart
Action Type: Custom JavaScript
Target: 
jQuery.post('/wp-json/wc/store/cart/add-item', {
    id: 123,
    quantity: 1
}).done(function() {
    jQuery('.cart-count').trigger('update');
});

Performance

Lazy Load SDK:

// Only load on specific pages
add_action('wp_enqueue_scripts', function() {
    if (is_page('contact')) {
        // SDK will load only on contact page
    }
});

Cache Considerations:

Clear WordPress cache after configuration changes
If using CDN, purge cache
Check browser cache (Ctrl+Shift+R for hard refresh)

Security

Best Practices

Protect SDK Keys:
- Never commit SDK keys to public repositories
- Use environment variables for staging/production
Validate User Input:
- Custom JavaScript actions run with user privileges
- Sanitize any user input used in custom actions
HTTPS Required:
- Always use HTTPS in production
- API connections use secure transport
Rate Limiting:
- SDK automatically rate-limits requests
- Configure limits in Prodact.ai dashboard

Support

Need help?

Documentation: docs.prodact.ai (opens in a new tab)
Support: [email protected]
Community: Discord (opens in a new tab)

Requirements

WordPress 5.0+
PHP 7.4+
jQuery (included with WordPress)
Modern browser (Chrome, Firefox, Safari, Edge)

License

MIT License - see LICENSE file for details

Vanilla JavaScript API Reference