Back to Community

How to Use Shortcodes and Custom Links with the Chaty Widget

Content

Many WordPress users look for ways to integrate the Floating Chat Widget: Contact Chat Icons, Telegram Chat, Line Messenger, WeChat, Email, SMS, Call Button, WhatsApp – Chaty plugin more flexibly into their sites. A common request is to trigger the widget using a shortcode or a custom link, for instance, to place it within a menu, a page's content, or the site footer.

Based on community discussions, this functionality is a point of some confusion. This guide will clarify what is possible and provide the standard methods for controlling the Chaty widget.

Understanding Chaty's Shortcode Capabilities

Analysis of support threads indicates that the Chaty plugin does not natively support a shortcode for displaying its main floating widget. As confirmed in one thread, a user was told, "you can’t add a shortcode in Chaty nor launch Chaty with a shortcode."

Another thread asking about placing the widget in a footer using a shortcode received a similar response, confirming it is not possible to embed the widget directly into a site's footer in this manner. The suggested alternative is to use the widget's built-in positioning settings to place it near the bottom of the screen.

The Standard Solution: JavaScript Triggers

While a traditional shortcode is not available, the Chaty team provides an official method to programmatically open and close the widget. This is achieved using custom JavaScript functions.

According to a visual guide referenced in a support thread, you can use the following code snippets:

  • To open the Chaty widget: jQuery('#chaty-widget').click();
  • To close the Chaty widget: jQuery('.chaty-close').click();

You can attach these functions to any click event on your site, such as a custom button, a menu link, or a text element. This effectively creates a custom trigger link to launch the chat widget.

How to Implement a Custom Chaty Launcher

Here is a step-by-step method to create a link that opens the Chaty widget:

  1. Create your link or button: Add a standard link (<a> tag) or button to your menu, page, or footer using your WordPress editor or theme options. For example: <a href="#" id="my-custom-chaty-trigger">Open Chat</a>
  2. Add the JavaScript code: Insert the following code into your site, preferably in a custom JavaScript file or a tool that allows you to add code snippets to your site's footer.

    jQuery(document).ready(function($) {
      $('#my-custom-chaty-trigger').on('click', function(e) {
        e.preventDefault(); // Prevents the link from navigating
        $('#chaty-widget').click(); // Triggers a click on the Chaty widget
      });
    });


    Ensure you replace the selector #my-custom-chaty-trigger with the actual ID or class of the element you created.
  3. Test the functionality: Save your changes and visit your website. Clicking your new custom link should now open the Chaty widget.

Conclusion and Further Help

For most use cases, the JavaScript trigger method provides a robust workaround for the lack of a native shortcode. It offers the flexibility to launch the chat widget from anywhere on your site.

If you encounter issues with this method or your requirements are more complex, the recommended path is to contact the plugin's support team directly at [email protected] for personalized assistance. When reaching out, provide specific details about your website and what you are trying to achieve for the most effective support.

Related Support Threads Support