Wordpress integration

Let's cover two easy ways to add the code snippet to your Wordpress website.

To proceed, make sure you registered your website at https://expertpal.io/button and got a widget ID per email. Here is how you can get your code snippet if you already have a widget ID or would like to change widget look, text or position.

Generating a code snippet for your website based on existing widget ID

Now as we know you have the code snippet let's insert it into your Wordpress website and we are done!

Option 1: Theme Editor

• Go to your WordPress admin dashboard.

• Navigate to Appearance > Theme Editor.

• Open the functions.php file of your active theme (on the right).

function expertpal_button_widget() {
    ?>
    <!-- paste your expertpal code snippet after this line -->
    
    <script type="text/javascript">
    window.$apwCfg = {
        widgetId: 'cefa9fd5-aaf6-4e55-b540-9c5bae4a0fe4',
        position: 'left',
        colors: 'blue',
        buttonText: 'Need help with this product?',
        buttonShowAlways: true
    };
    var s = document.createElement('script');
    s.type = 'module';
    s.src = 'https://cdn.expertpal.io/ppwidget/index.0a32879e.js';
    document.getElementsByTagName('head')[0].appendChild(s);
    </script>
    
    <!-- end of expertpal code snippet  -->
    <?php
}
add_action('wp_footer', 'expertpal_button_widget');

Option 2: Integration using a plugin

To make sure you don't mess up the functions.php file, use one of the Wordpress Plugins that allow you to do the same as above in an easy and safe way. Most likely you already have a plugin installed that allows you to add custom JS code. If not, here are some plugins you can use, pick one:

• Code Snippets

• Custom CSS and JavaScript.

• Insert Headers and Footers

• Code Embed

• Simple Custom CSS and JS

We will use Simple Custom CSS and JS in this demo. Let's go!

1. Go to Plugins -> Install New Plugin in your WP Dashboard

2. In search bar type Simple Custom CSS and JS

3. Find that plugin in the results, click Install Now and then Activate

4. The plugin has been installed. Click on the left menu Custom JS & CSS -> Add Custom JS

5. Copy and paste expertpal code snippet without the <script></script> tags into the window, give it a name and click Publish. The widget will show up on your product pages. See example below.

adding snippet with Custom CSS & JS plugin

paste code snippet without, remove <script> and </script> and click Publish