WP Chat App Shortcode

Below, you’ll find a detailed guide on how to add the WP Chat App Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WP Chat App Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the WP Chat App Plugin and the shortcodes it provides:

WP Chat App

"WP Chat App is a user-friendly WordPress plugin that integrates WhatsApp into your website. It enables direct, seamless communication with your audience, enhancing user engagement and support."

★★★★☆ (136) Active Installs: 90000+ Tested with: 6.3.2 PHP Version: false

Included Shortcodes:

• [njwa_button]

WP Chat App [njwa_button] Shortcode

The NJWA_Button shortcode is a powerful tool in the WP-WhatsApp plugin. It dynamically generates a WhatsApp button, integrating analytics, display, and style options. The shortcode extracts the ID and uses it to fetch various settings like widget display, styles, and analytics. It retrieves the title, account info, post thumbnail, and checks for GDPR compliance. Finally, it creates a div element with the necessary data attributes.

Shortcode: [njwa_button]

Parameters

Here is a list of all possible njwa_button shortcode parameters and attributes:

• id – The unique identifier for the WhatsApp button.
• displayOption – Defines how the WhatsApp button will be displayed.
• stylesOption – Sets the style attributes for the WhatsApp button.
• analyticsOption – Determines whether analytics will be used for the button.
• name – The title of the button, usually the page title.
• info – Extra information related to the WhatsApp account.
• avatar – The URL of the avatar image to be displayed on the button.
• gdprStatus – Checks whether GDPR compliance is needed for the button.
• defaultAvatar – The URL of the default avatar image if no avatar is provided.

Examples and Usage

Basic example – A simple usage of the shortcode to display a WhatsApp button associated with a specific ID.

[njwa_button id=1 /]

Advanced examples

Displaying the WhatsApp button with a specific ID and additional parameters for customizing the display, style, and analytics options. This example provides more control over the appearance and behavior of the button.

[njwa_button id=1 display="true" styles="custom" analytics="true" /]

Using the shortcode to display a WhatsApp button by referencing both ID and title. If the button with the specified ID is not found, the button with the specified title will be displayed.

[njwa_button id=1 title="Contact Us" /]

Displaying the WhatsApp button with a specific ID and a custom avatar URL. This allows you to customize the appearance of the button with a unique avatar.

[njwa_button id=1 avatar="http://example.com/path/to/avatar.jpg" /]

Please note that the actual usage of these shortcodes may vary depending on the specifics of the plugin and the parameters it supports.

PHP Function Code

In case you have difficulties debugging what causing issues with [njwa_button] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('njwa_button', [$this, 'button_shortcode']);

Shortcode PHP function:

function button_shortcode($id)
    {
        extract($id);
        $displayOption = Fields::getWidgetDisplay();
        $stylesOption = Fields::getWidgetStyles();
        $analyticsOption = Fields::getAnalyticsSetting();

        $script = array(
            'name' => get_the_title($id),
            'info' => get_post_meta($id, 'nta_wa_account_info', true),
            'styles' => Fields::getButtonStyles($id),
            'avatar' => get_the_post_thumbnail_url($id),
            'options' => [
                'display' => $displayOption,
                'styles' => $stylesOption,
                'analytics' => $analyticsOption
            ],
            'gdprStatus' => Helper::checkGDPR($stylesOption),
            'defaultAvatar' => NTA_WHATSAPP_PLUGIN_URL . 'assets/img/whatsapp_logo.svg'
        );

        $content = '<div class="nta_wa_button" data-id="' . esc_attr($id) . '" data-info="' . esc_attr(json_encode($script)) . '"></div>';

        return $content;
    }

Code file location:

wp-whatsapp/wp-whatsapp/includes/Shortcode.php

Conclusion

Now that you’ve learned how to embed the WP Chat App Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.