Installation
Install Javascript Chat Plugin on Website
There are 3 ways to use Applozic web chat plugin.
Please choose 1 approach out of the following:
Pre-built customizable web chat UI
You will get a small code snippet to copy paste into your website. Within 2 mins, you can have a ready to use chat widget with UI and all features available up and running.


Sidebox layout - pre built web chat UI
This section will guide you in installing our pre-built web chat UI.
NOTE : Use local web server to view HTML files as real-time update will not work if you directly open the HTML file in the browser.
Adding sidebox chat UI plugin to your website
The steps below will guide you in adding the sidebox chat plugin to your website:
Add the plugin script mentioned below into your javascript code. Applozic installation script must be called on every page where the chat widget is required.
For a single page application, call the script on user login or register events.
<script type="text/javascript">
(function(d, m){var s, h;
s = document.createElement("script");
s.type = "text/javascript";
s.async=true;
s.src="https://apps.applozic.com/sidebox.app";
h=document.getElementsByTagName('head')[0];
h.appendChild(s);
window.applozic=m;
m.init=function(t){m._globals=t;}})(document, window.applozic || {});
</script>
For rest pages, add below script before the closing of '' into your web page
Open source javascript chat widget
Download the source code of the Applozic javascript plugin from Github
Refer to the code sample available in
https://github.com/AppLozic/Applozic-Web-Plugin/tree/master/public/plugin/sample
Project is in node js.
Execute the following in the commands to run the sample:
npm install
node app.js
Open http://localhost:2299 in the browser to see the sample.
There are 2 UI designs:
](https://files.readme.io/7ecdd6c-Full_view.png)
](https://files.readme.io/7ecdd6c-Full_view.png)
Fullview layout - pre built web chat UI
Adding sidebox chat UI plugin to your website
The steps below will guide you in adding the sidebox chat plugin to your website:
Open sidebox.html
Copy the scripts and HTML code to your web page in the same order as done in sidebox.html
For any feature and design modification, the following 2 files can be modified:
Adding fullview chat UI plugin to your website
The steps below will guide you in adding the fullview chat plugin to your website:
Open fullview.html
Copy the scripts and HTML code to your web page in the same order as done in fullview.html
For any feature and design modification, following 2 files can be modified:
Modify the source code as per your design and requirements.
Important file references:
HTML Template
CSS
JS
Build your UI from scratch
This is a core library without any UI components.
Add the following script reference in your html page:
<script type="text/javascript" src="https://cdn.applozic.com/applozic/applozic.chat-6.1.min.js"></script>
Refer to "Build your UI from scratch" section in the next steps for using the core library without UI components.
Updated 6 months ago