## 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>

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize