Chat widget

A support chat widget built with CSS and JavaScript

Structure

<pre class="scrollbar my-5"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;

  &lt;head&gt;...&lt;/head&gt;

  &lt;body&gt;
    &lt;main&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
        &lt;!-- navbar content goes here--&gt;
        &lt;div class=&quot;content&quot;&gt;
          &lt;!-- content goes here--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;support-chat-container&quot;&gt;
        &lt;!-- chat widget content gose here--&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/body&gt;

&lt;/html&gt;</code></pre>
<!DOCTYPE html>
<html>

  <head>...</head>

  <body>
    <main>
      <div class="container-fluid">
        <!-- navbar content goes here-->
        <div class="content">
          <!-- content goes here-->
        </div>
      </div>
      <div class="support-chat-container">
        <!-- chat widget content gose here-->
      </div>
    </main>
  </body>

</html>

Appearance

<p>You can control the chat widget appearance by clicking the toggle button on the settings panel.</p>
<h5 class="mb-3">Gulp based workflow</h5>
<p class="mb-2">To hide the chat widget, open <code>src/js/config.js </code>in your project directory and set <code>phoenixSupportChat: false </code>of <code>initialConfig </code>object.</p><pre class="scrollbar mb-5"><code class="lang-html">const initialConfig = {
  phoenixSupportChat: true || false,
  ...
};</code></pre>
<h5 class="mb-3">Without gulp based workflow</h5>
<p class="mb-2">To hide the chat widget, open <code>public/assets/js/config.js </code>in your project directory and set <code>phoenixSupportChat: false </code>of <code>initialConfig </code>object.</p><pre class="scrollbar mb-5"><code class="lang-html">const initialConfig = {
  phoenixSupportChat: true || false,
  ...
};
</code></pre>
<p>At the bottom right corner, you will find the widget button. By clicking the button, the <code>.show-chat </code>class will toggle and the chat will be shown or hidden.</p><pre class="scrollbar mt-3"><code class="language-html">&lt;div class=&quot;container-fluid support-chat show-chat&quot;&gt;&lt;/div&gt;</code></pre>

You can control the chat widget appearance by clicking the toggle button on the settings panel.

Gulp based workflow

To hide the chat widget, open src/js/config.js in your project directory and set phoenixSupportChat: false of initialConfig object.

const initialConfig = {
  phoenixSupportChat: true || false,
  ...
};
Without gulp based workflow

To hide the chat widget, open public/assets/js/config.js in your project directory and set phoenixSupportChat: false of initialConfig object.

const initialConfig = {
  phoenixSupportChat: true || false,
  ...
};

At the bottom right corner, you will find the widget button. By clicking the button, the .show-chat class will toggle and the chat will be shown or hidden.

<div class="container-fluid support-chat show-chat"></div>

Position

<p>Initially, the chat widget will appear at the bottom right corner, you can add <code>.support-chat-start </code>class to take it to the bottom left corner.</p><pre class="scrollbar mt-3"><code class="language-html">&lt;div class=&quot;support-chat-container support-chat-start&quot;&gt;&lt;/div&gt;</code></pre>

Initially, the chat widget will appear at the bottom right corner, you can add .support-chat-start class to take it to the bottom left corner.

<div class="support-chat-container support-chat-start"></div>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.18.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize