How to add chat to a Wordpress site with TalkJS

Do you want to add chat to your WordPress site? With the TalkJS WordPress plugin, you can add a complete chat messaging solution to your marketplace, app, or platform in just five minutes.

The TalkJS Wordpress plugin integrates fully with WooCommerce and marketplace or multi-vendor plugins, such as WCVendors.

Implement TalkJS

With the TalkJS Wordpress plugin, you can use shortcodes and template tags to create an Inbox, Chatbox, or Popup chat UI. The plugin also automatically adds a Chatbox widget and an Inbox page to access all conversations.

Shortcodes

You can add chat to your site using shortcodes. Shortcodes work on a page-by-page basis. Simply add one of the following shortcodes to your page:

• [talkjs_chat]
• [talkjs_inbox]
• [talkjs_popup]

and your selected chat UI shows up.

Default conversation user

Set a default conversation user by adding the user ID, for example:

[talkjs_chat user="2"]

You can only set a default conversation user for Chatbox or Popup UI.

Get post author

Get the author of the post as your conversation user, by specifying a userType, for example:

[talkjs_chat userType="author"]

Welcome message

Add a custom welcome message to the conversation using welcomeMessage, for example:

[talkjs_chat welcomeMessage="Hi there!"]

Customize width or height

Customize the width and height of either the Inbox or Chatbox UI, for example as follows:

[talkjs_chat width="250px" height="500px"]

Note that you can’t control the width and height of the Popup in this way.

Styles

You can control the style of the TalkJS UI container also within shortcodes, using the style property to overwrite the default styles.

When you’re using style, width and height properties are ignored.

Keep the Popup open

To keep the Popup open for users as they navigate between pages, use the shortcode with the keepOpen property, as follows:

[talkjs_popup keepOpen="true"]

Template tags

To add to a template in Wordpress, you can use template tags in your code, as follows:

• <?php talkjs_chat();?>
• <?php talkjs_popup();?>
• <?php talkjs_inbox();?>

You can pass along the same attributes to templates as you would with shortcodes. To pass attributes to a template, use associative arrays.

Default conversation user

Set a default conversation user by adding the user ID, for example:

<?php talkjs_chat(['user' => '2']);?>

You can only set a default conversation user for Chatbox or Popup UI.

Get post author

Get the author of the post as your conversation user, by specifying a userType, for example:

<?php talkjs_chat(['userType' => 'author']);?>

Welcome message

Add a custom welcome message to the conversation using welcomeMessage, for example:

<?php talkjs_chat(['welcomeMessage' => 'Hi there!']);?>

Customize width or height

Customize the width and height of either the Inbox or Chatbox UI, for example as follows:

<?php talkjs_chat(['width' => '250px', 'height' => '500px']);?>

Note that you can’t control the width and height of the Popup in this way.

Styles

You can control the style of the TalkJS UI container also within templates, using the style property to overwrite the default styles.

When you’re using style, width and height properties are ignored.

Keep the Popup open

To keep the Popup open for users as they navigate between pages, use the template tag with the keepOpen property, as follows:

<?php talkjs_popup(['keepOpen' => 'true']);?>

Chatbox widget

For the Chatbox UI, you can use the TalkJS Chatbox widget. In the widget you can set a title, a welcome message, and the conversation user. (If you leave the conversation user field empty, then the current post author shows up by default.)

Customize the welcome message

You can add custom variables to your welcome message. The following variables are available:

• {{first_name}} for the logged-in user's first name
• {{last_name}} for the logged-in user's last name
• {{name}} for the logged-in user's full name

Filter

You can use the talkjs_hidden_post_types_for_chat_popup filter to hide your custom post-type as a viable chat option. For example:

<?php
add_filter( 'talkjs_hidden_post_types_for_chat_popup', function(
    $postTypes ){ $postTypes[] = 'my-custom-post-type';
    return $postTypes;
});
?>

Do you need more filters? Feel free to contact us.

Email notifications

To use email notifications in combination with the TalkJS Wordpress plugin, enable notifications from the Notifications pages of your TalkJS dashboard.

If you’re using multiple roles, then make sure that each user’s role in your Wordpress site corresponds to the role you have assigned to that user on your TalkJS dashboard. Note that the names of the roles on Wordpress and on TalkJS have to be correspond, but in TalkJS the role name must be in lowercase. For example, if you have a Seller role on your Wordpress site, then name the role seller in TalkJS.

Do you have any questions about the TalkJS Wordpress plugin? Get in touch.