Getting Started

::: info When integrating the Easychatroom chat system into your website, you don't need to upload any additional files. :::

Basic Integration

<script>
  window.easychatrooms = {
    EASYCHAT_APP_SOCKET_URL: 'https://demo-servers.easychatrooms.com',
  };
</script>

<div id="app"></div>

<script src="https://cdn1.easychatrooms.com/core/loader.js"></script>

Simply add these codes to the page where you want to integrate the chat system on your website.

WordPress Integration

To integrate Easychatroom with WordPress, follow these steps:

Add the Scripts to Your Theme

Navigate to your WordPress dashboard.

Go to Appearance > Theme Editor.

Open the template you wish to edit.

Insert the following scripts:

<script>
  window.easychatrooms = {
    EASYCHAT_APP_SOCKET_URL: 'https://demo-servers.easychatrooms.com',
  };
</script>

<div id="app"></div>

<script src="https://cdn1.easychatrooms.com/core/loader.js"></script>

Shopify

To integrate Easychatroom with Shopify:

Access Your Shopify Admin

Log in to your Shopify admin panel. Go to Online Store > Themes. Click on Actions > Edit Code for your active theme. Edit the Theme Layout

Open the theme.liquid file located under Layout.

<script>
  window.easychatrooms = {
    EASYCHAT_APP_SOCKET_URL: 'https://demo-servers.easychatrooms.com',
  };
</script>

<div id="app"></div>

<script src="https://cdn1.easychatrooms.com/core/loader.js"></script>

Save the changes.

HubSpot

To integrate Easychatroom with HubSpot:

Access HubSpot Account

Log in to your HubSpot account. Navigate to Marketing > Files and Templates > Design Tools. Edit the Template

Open the template you wish to edit.

Insert the following scripts before the closing html</body> tag:

<script>
  window.easychatrooms = {
    EASYCHAT_APP_SOCKET_URL: 'https://demo-servers.easychatrooms.com',
  };
</script>

<div id="app"></div>

<script src="https://cdn1.easychatrooms.com/core/loader.js"></script>

Save and publish the template.

Configurations

Configure Easychatroom by setting the following options:

window.easychatrooms = {
  EASYCHAT_APP_SOCKET_URL: 'service URL', // Required
  user_id: 'your_user_id',                // Optional
  password: 'your_password',              // Optional
  lang: 'en',                             // Optional, default is 'en'
  theme: 'dark',                          // Optional, options: 'dark' or 'light', default is 'light'
  version: '0.2.1'                        // Optional
  basicMode: 'true'                        // Optional
};

• EASYCHAT_APP_SOCKET_URL: (Required) The service URL for the Easychatroom socket connection.
• user_id: (Optional) If defined, the system will attempt to automatically log in the user.
• password: (Optional) The password associated with the user_id for automatic login.
• lang: (Optional) Language setting. The default value is 'en'.
• theme: (Optional) Theme setting. Options are 'dark' or 'light'. The default value is 'light'.
• version: (Optional) Version setting. The default value is '1.0.0'.
• basicMode: (Optional) When basic mode is set to true, post sharing and match system are disabled. The menu bar on the left side of the desktop view is hidden.

Note:

• The EASYCHAT_APP_SOCKET_URL is mandatory.
• If both user_id and password are provided, the system will try to log in automatically.
• The lang defaults to English ('en').
• The theme defaults to light mode ('light').
• The version defaults to 'latest'.
• The basicMode defaults to 'none'.