Pre-built customizable web chat UI

This section will guide you in installing our pre-built web chat UI.

Alternatively, if you are looking to build your own chat UI using Applozic's features, you can refer to Build your UI from scratch section below.

We provide 2 different pre-built chat UI plugins:

1. Sidebox layout. See it in action: https://www.applozic.com/chat.html ( Username: demo Password: demo )
2. Fullview layout. See it in action: https://web.applozic.com/plugin/sample/fullview.html ( Username: demo Password: demo )

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.

For rest pages, add below script before the closing of '</body>' into your web page

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

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 file from:
https://github.com/AppLozic/Applozic-Web-Plugin/blob/master/public/plugin/sample/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 file can be modified:

CSS: https://github.com/AppLozic/Applozic-Web-Plugin/blob/master/public/plugin/css/app/fullview/applozic.fullview.css

JS: https://github.com/AppLozic/Applozic-Web-Plugin/blob/master/public/plugin/js/app/fullview/applozic.fullview.js

Build your UI from scratch

This section will guide you in making your own chat UI from scratch, using Applozic chat features.

Clone repository: git clone https://github.com/AppLozic/Applozic-Web-Plugin.git
or download from https://github.com/AppLozic/Applozic-Web-Plugin by clicking on the Download button under the repository name.

Import below file in your main file.

  <script type="text/javascript" src="Applozic-Web-Plugin/public/applozic.chat.min.js"></script>