Chat widget
A support chat widget built with CSS and JavaScript
Structure
<pre class="scrollbar my-5"><code class="language-html"><!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></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"><div class="container-fluid support-chat show-chat"></div></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"><div class="support-chat-container support-chat-start"></div></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>
