ChatenAI Documentation
Welcome to ChatenAI ! Get familiar with the
Stripe products and explore their features:
Getting Started
Welcome to ChatenAI ! Get familiar with the
Stripe products and explore their features:
Unlock the potential of ChatenAI, your go-to Modern
Bootstrap Template for cutting-edge AI Conversations.
Built on HTML5 and Bootstrap5, this template boasts a
component-based structure, ensuring a developer-friendly
and streamlined experience. With a contemporary design
and swift loading capabilities, it transforms the
landscape of AI-driven interactions. Explore a diverse
range of pages, including Home Default, Dashboard and
various other essential inner or details pages. Elevate
your web presence with ChatenAI—where innovation meets
seamless user experience.
ChatenAI Core Features
-
HTML5 & CSS3
-
Responsive layout
(desktops, tablets, mobile devices)
-
Built with
Bootstrap v5.0.2
-
Well structured
code
-
Contact Form
Working
-
Hinted Typography
-
Light Mode Available
- RTL Available
-
Sass Available
-
W3 Valid 100%
-
Fast Loading Speed
-
Cross Browser
Support
-
Dedicated Support,
Lifetime Updates
-
And much more …
What's Included
After purchasing ChatenAI template on templateforest.net
with your Envato account, go to your Download page. You
can choose to download ChatenAI template only or the
entire ChatenAI template package which contains the
following files:
-
ChatenAI template: A .zip file
with all .html files with all necessary assets.
-
Documentation: An HTML format
documentation.
- Licensing.
How to Install ChatenAI Website Templates
Installing a nuron template is not like WordPress or CMS
theme installation, actually, installation keyword does
not go with nuron template. Why? because you don’t
install anything, yes nuron or HTML templates are
automatically rendered by the browser.
1. Editing ChatenAI Template
Before all that you have to edit your template and place
your own contents by replacing old demo contents, in
this case, you will need a code editor such as – VScode,
Sublime Text, etc. When template editing is done using
editor, save the files and folder and go ahead to upload
template files on live server.
2. Uploading to Live Server Using FTP:
First of all, If you don’t have your template on your
computer, download ChatenAI template to get started,
when download/purchase complete you will get a package
like this screenshot (after unzip).
3. Package comes with documentation unzip the download
package, you’ll found a folder with all template files,
like above screenshot.
4. Now, login to your hosting control panel or FTP
client, such as: FileZilla, CyberDuck etc. and upload
template files on your server root.
5. Once all files are uploaded, go to
www.yoursite.com/index.html you can see your the
homepage, make sure the initial page is named as
index.html
Convert Chatenai LTR to RTL
If you want to convert your default chatenai html template to RTL.Then you
have made this three changes in every html file.
Step - 1: Add the RTL Attribute to the HTML Tag:
<!DOCTYPE html>
<html lang="en" dir="rtl">
Step - 2: Include the RTL CSS File:
Ensure you link to an RTL CSS file in the
<head> section of your HTML
<link rel="stylesheet" href="assets/css/rtl-style.css">
Step - 3: Include the RTL JS File for slider:
<script src="assets/js/rtl.js"></script>
Step - 4: Need to change in some Html class name:
To convert inner pages into rtl you have add some chnage mr--0 to ml--0
in those html file
appearance.html || application.html ||
chat-export.html || dashboard.html ||
help.html || notification.html ||
plans-billing.html || privacy-policy.html ||
profile-details.html || release-notes.html ||
sessions.html || terms-policy.html
<div class="ml--0"></div>
How to Convert ChatenAi Default Templates into Light mode
-
Need to add SCSS
To enable light mode for the chatenai interface, you will
need to include the specified SCSS file into the
styles.scss
file.
Then you need to add another scss file for the switcher
style _switcher.scss
-
Customize Folder
Add an additional subfolder named
light within the existing images folder
to organize the new images.
-
Customize Code
You need to add this file to switch between ligh theme and
dark theme
<div id="my_switcher" class="my_switcher">
<ul>
<li>
<a href="javascript: void(0);" data-theme="light" class="setColor light">
<img src="assets/images/light/switch/sun-01.svg" alt="Sun images" />
</a>
</li>
<li>
<a href="javascript: void(0);" data-theme="dark" class="setColor dark">
<img src="assets/images/light/switch/vector.svg" alt="Vector images" />
</a>
</li>
</ul>
</div>
-
Switch logo
<div class="logo">
<a href="index.html">
<img class="logo-light" src="assets/images/logo/logo.png" alt="ChatBot Logo">
<img class="logo-dark" src="assets/images/logo/logo-dark.png" alt="Corporate Logo">
</a>
</div>
-
Include JavaScript File
<script src="assets/js/vendor/jquery.style.switcher.js"></script>
<script src="assets/js/vendor/js.cookie.js"></script>
Header Types
Welcome to ChatenAI Header Elements! You can
choose 12 Types of header package for createing you
website.
All Elemnts and Shortcode Types
Welcome to ChatenAI Elements and Shortcode!
You can select any elements & shortcode and customize
easily and build your website.
Accordion
Extend the default collapse behavior to create an
accordion with the panel component see the code for
better understanding
<!-- Start Accordion-2 Area -->
<div class="rainbow-accordion-style accordion">
<div class="accordion" id="accordionExamplea">
<div class="accordion-item card bg-flashlight">
<h2 class="accordion-header card-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
What is ChatenAI ? How does it work?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExamplea">
<div class="accordion-body card-body">
ChatenAI is an AI-powered messaging platform that understands and responds to your natural language queries. Ask anything you'd typically ask a human assistant—get weather updates, news, restaurant recommendations, and more!
</div>
</div>
</div>
<div class="accordion-item card bg-flashlight">
<h2 class="accordion-header card-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
What kind of questions can I ask ChatenAI?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExamplea">
<div class="accordion-body card-body">
ChatenAI, an AI-driven messaging platform, adeptly communicates with users using natural language understanding. It delivers helpful responses to your inquiries and requests.
</div>
</div>
</div>
<div class="accordion-item card bg-flashlight">
<h2 class="accordion-header card-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Can I get update regularly and For how long do I get updates?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExamplea">
<div class="accordion-body card-body">
Yes, We will get update the ChatenAI. And you can get it any time. Next
time we will comes with more feature. You can be get update for
unlimited times. Our dedicated team works for update.
</div>
</div>
</div>
</div>
</div>
<!-- End Accordion-2 Area -->
Separator Top
You can create an Separator top with the panel
component see the code for better understanding
<!-- Start Separator -->
<div class="chatenai-separator">
<img class="w-100" src="assets/images/separator/separator-top.svg" alt="Separator Images">
</div>
<!-- END Separator -->
Separator Bottom
You can create an Separator bottom with the panel
component see the code for better understanding
<!-- Start Separator -->
<div class="chatenai-separator">
<img class="w-100" src="assets/images/separator/separator-bottom.svg" alt="Separator Images">
</div>
<!-- END Separator -->
Clients
Showcase of clients logos or images. See below image
and code for more information.
<!-- Start Clients -->
<ul class="brand-list brand-style-2">
<li><a href="#"><img src="assets/images/brand/brand-01.png" alt="Brand Image"></a></li>
<li><a href="#"><img src="assets/images/brand/brand-02.png" alt="Brand Image"></a></li>
<li><a href="#"><img src="assets/images/brand/brand-03.png" alt="Brand Image"></a></li>
<li><a href="#"><img src="assets/images/brand/brand-04.png" alt="Brand Image"></a></li>
<li><a href="#"><img src="assets/images/brand/brand-05.png" alt="Brand Image"></a></li>
<li><a href="#"><img src="assets/images/brand/brand-06.png" alt="Brand Image"></a></li>
<li><a href="#"><img src="assets/images/brand/brand-07.png" alt="Brand Image"></a></li>
<li><a href="#"><img src="assets/images/brand/brand-08.png" alt="Brand Image"></a></li>
<li><a href="#"><img src="assets/images/brand/brand-01.png" alt="Brand Image"></a></li>
</ul>
<!-- End Clients -->
Call To Action
Awesome call to action styles. See below image and
code for more information.
<!-- Start Call TO Action Area -->
<div class="rainbow-callto-action-area">
<div class="wrapper">
<div class="rainbow-callto-action clltoaction-style-default rainbow-section-gap">
<div class="container">
<div class="row row--0">
<div class="col-lg-12">
<div class="align-items-center content-wrapper">
<div class="inner">
<div class="content text-center">
..
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fancy-genearate-section">
<div class="container">
<div class="genarator-section">
..
</div>
</div>
</div>
</div>
</div>
<!-- End Call TO Action Area -->
Support
Thank you for purchasing my template.
If you have any questions that are beyond the scope of
this help file, please feel free to open a new ticket at
our
Support
forum
Change Log
Rainbow-Themes team never stops Improving, bug fixes, and
improvements. See What's New. We recommend you to read the
changelog for every update.
03 October 2020
Init release
