AIwave Documentation

Welcome to AIwave ! Get familiar with the Stripe products and explore their features:

Working with Doc

You can any work by following our docs

Formatting Content

Our content is more formating for your website

Perfect Responsive

Our Template is full Perfect for all device. You can visit our template all device easily.

Sass Available

The tamplate has Sass available for css. You can Change css by sass

Fast Loading Speed

AIwave is faster loading speed. AIwave create your template so much faster

24 Support System

We are provide 24 hours support for all clients.You can purchase without hesitation.

Getting Started

Welcome to AIwave ! Get familiar with the Stripe products and explore their features:

Unlock the potential of AIwave, 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 AIwave—where innovation meets seamless user experience.

AIwave Core Features

What's Included

After purchasing AIwave template on templateforest.net with your Envato account, go to your Download page. You can choose to download AIwave template only or the entire AIwave template package which contains the following files:

AIwave template: A .zip file with all .html files with all necessary assets.
Documentation: An HTML format documentation.
Licensing.

How to Install AIwave 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 AIwave 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 AIwave 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

Template Structures

Articles

HTML Structure

This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into differt section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.

                                            
                                                <!DOCTYPE html>
                                                <html lang="en">

                                                <head>
                                                    <meta charset="UTF-8">
                                                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                                    <meta name="theme-style-mode" content="1"> 

                                                    <title>Home || AIwave Modern Bootstrap Template for AI Conversations</title>
                                                    <!-- Favicon -->
                                                    <link rel="shortcut icon" type="image/x-icon" href="assets/images/logo/favicon.png">
                                                    <!-- CSS ============================================ -->
                                                    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/animation.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/feature.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/magnify.min.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/slick.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/slick-theme.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/lightbox.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/bootstrap-select.min.css">

                                                    <link rel="stylesheet" href="assets/css/plugins/prism.css">
                                                    <link rel="stylesheet" href="assets/css/style.css">
                                                </head>

                                                <body>

                                                    <!-- JS ============================================= -->
                                                    <script src="assets/js/vendor/modernizr.min.js"></script>
                                                    <script src="assets/js/vendor/jquery.min.js"></script>
                                                    <script src="assets/js/vendor/bootstrap.min.js"></script>
                                                    <script src="assets/js/vendor/popper.min.js"></script>
                                                    <script src="assets/js/vendor/waypoint.min.js"></script>
                                                    <script src="assets/js/vendor/wow.min.js"></script>
                                                    <script src="assets/js/vendor/counterup.min.js"></script>
                                                    <script src="assets/js/vendor/feather.min.js"></script>
                                                    <script src="assets/js/vendor/sal.min.js"></script>
                                                    <script src="assets/js/vendor/masonry.js"></script>
                                                    <script src="assets/js/vendor/imageloaded.js"></script>
                                                    <script src="assets/js/vendor/magnify.min.js"></script>
                                                    <script src="assets/js/vendor/lightbox.js"></script>
                                                    <script src="assets/js/vendor/slick.min.js"></script>
                                                    <script src="assets/js/vendor/easypie.js"></script>
                                                    <script src="assets/js/vendor/text-type.js"></script>
                                                    <script src="assets/js/vendor/prism.js"></script>
                                                    <script src="assets/js/vendor/jquery.style.swicher.js"></script>

                                                    <script src="assets/js/vendor/bootstrap-select.min.js"></script>

                                                    <script src="assets/js/vendor/js.cookie.js"></script>
                                                    <script src="assets/js/vendor/jquery-one-page-nav.js"></script>
                                                    <!-- Main JS -->
                                                    <script src="assets/js/main.js"></script>
                                                </body>

                                                </html>

CSS Files and Structure

We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:

                                            
                                                /**************************************
                                                Template Name: AIwave Modern Bootstrap Template for AI Conversations
                                                Description: A perfect Template For AI Conversations. It comes with nice and clean design.
                                                Note: This is style css.  
                                                ****************************

                                                /--- Default Styles -----/

                                                01.Variables
                                                02.Mixins
                                                03.Reset
                                                04.Typography
                                                05.Extend
                                                06.Animations
                                                07.Shortcode
                                                08.Spacing
                                                09.Common
                                                10.Forms
                                                11.Sal
                                                12.Text Animation
                                                13.Themebg

                                                /--- Header Styles -----/

                                                01.Headerdefault
                                                02.Nav
                                                03.Header Top
                                                04.HeaderTopBar
                                                05.Mobilemenu

                                                /--- Elements -----/

                                                01.Breadcrumb
                                                02.Sectiontitle
                                                03.Button
                                                04.Service
                                                05.Card
                                                06.Counter
                                                07.Progressbar
                                                08.styleguide
                                                09.Social Share
                                                10.Team
                                                11.Portfolio
                                                12.Testimonial
                                                13.Slickslide
                                                14.Timeline
                                                15.Call to Action
                                                16.Tab
                                                17.Pricing
                                                18.Split
                                                19.Vedio
                                                20.Gallery
                                                21.Contact
                                                22.Brand
                                                23.404
                                                24.Advance Tab
                                                25.Advancepricing
                                                26.Contact Form
                                                27.Swicher
                                                28.Backto Top
                                                29.About
                                                30.Newsletter

                                                /--- Blog -----/
                                                01.Blog
                                                02.Sidebar
                                                03.Blog Details

                                                /--- Footer -----/
                                                01.Footer
                                                02.Copyright

                                                /--- Template -----/
                                                01.Banner
                                                02.Portfoliodetails
                                                03.Splash
                                                04.Lightmode

                                                ***************************************/
                                                  |___ END STYLESHEET INDEXING
                                                ***************************************************************/

JavaScript Files

There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:

Change Contents

Changing Images

To change any images of the website

Carefully collect the source name of the image (i.e. banner-img.jpg)
Open the file called images.
Find the particular image file.
Replace the file with your image.
Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file:

                                                    
                                                        <div class="logo">
                                                            <a href="index.html">
                                                                <img class="logo-light" src="assets/images/logo/logo.png" alt="ChatBot Logo">
                                                            </a>
                                                        </div>

You have to do the following to change this image with your own image:

Open the file called images.
Find the particular image file called banner-img.jpg
Replace the file with your image
Make sure that the file name does not change.

Note

Images seen in the live preview are only set for preview purposes. They are not included in the download files.

Changing Brand Logo

To change any images of the website

Carefully collect the source name of the image (i.e. banner-img.jpg)
Open the file called images.
Find the particular image file.
Replace the file with your image.
Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file for change your logo:

                                                    
                                                        <div class="logo">
                                                            <a href="index.html">
                                                                <img class="logo-light" src="assets/images/logo/logo.png" alt="ChatBot Logo">
                                                            </a>
                                                        </div>

Changing Colors

We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the style.scss file after you have made changes in any of the .scss files.

Changing default template colors

Open the variable.scss file from assets > scss > defaults folder with a text-editor.
Change the right-side values of the variables to change any default colors of your site.
Save your file.

Have a look at the following image for a visual description:

Header Types

Welcome to AIwave Header Elements! You can choose 12 Types of header package for createing you website.

01. Header Default

To change any images of the website

                                                    
                                                        <!-- Start Header Area --> 
                                                        <header class="rainbow-header header-default header-not-transparent header-sticky">
                                                            <div class="container position-relative">
                                                                <div class="row align-items-center row--0">
                                                                    <div class="col-lg-3 col-md-6 col-6">
                                                                        <div class="logo">
                                                                            <!-- Logo Here -->
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-9 col-md-6 col-6 position-static">
                                                                        <div class="header-right">
                                                
                                                                            <nav class="mainmenu-nav d-none d-lg-block">
                                                                                ..
                                                                            </nav>
                                                
                                                                            <!-- Start Header Btn  -->
                                                                            <div class="header-btn">
                                                                                ..
                                                                            </div>
                                                                            <!-- End Header Btn  -->
                                                
                                                                            <div class="mainmenu-nav d-none d-lg-block one-menu">
                                                                                ..
                                                                            </div>
                                                
                                                                            <!-- Start Mobile-Menu-Bar -->
                                                                            <div class="mobile-menu-bar ml--5 d-block d-lg-none">
                                                                                ..
                                                                            </div>
                                                                            <!-- Start Mobile-Menu-Bar -->
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </header>
                                                        <!-- End Header Area -->

02. Header With Topbar

Header with topbar and navigation menu to change your header area.

                                                    
                                                        <!-- Start Header Top Area  -->
                                                        <div class="header-top-news bg-image1">
                                                            <div class="wrapper">
                                                                <div class="container">
                                                                    <div class="row">
                                                                        <div class="col-lg-12">
                                                                            <div class="inner">
                                                                                <div class="content">
                                                                                    ..
                                                                                </div>
                                                                                <div class="right-button">
                                                                                    ..
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="icon-close">
                                                                <button class="close-button bgsection-activation">
                                                                    ..
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <!-- End Header Top Area  -->
                                                        <!-- Start Header Area --> 
                                                        <header class="rainbow-header header-default header-not-transparent header-sticky">
                                                            <div class="container position-relative">
                                                                ..
                                                            </div>
                                                        </header>
                                                        <!-- End Header Area -->

03. Dashboard Header

Header with ceneter navigation menu to change your header area.

                                                    
                                                        <header class="rbt-dashboard-header rainbow-header header-default header-left-align rbt-fluid-header">
                                                            <div class="container-fluid position-relative">
                                                                <div class="row align-items-center">
                                                                    <div class="col-lg-2 col-md-6 col-7">
                                                                        <div class="header-left d-flex">
                                                                            <div class="expand-btn-grp">
                                                                                <button class="bg-solid-primary popup-dashboardleft-btn"><i class="feather-menu left"></i></button>                                    
                                                                            </div>
                                                                            <div class="logo">
                                                                                ..
                                                                            </div>  
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-10 col-md-6 col-5">
                                                                        <div class="header-right">
                                                                            <nav class="mainmenu-nav d-none d-lg-block text-center">
                                                                                ..
                                                                            </nav>

                                                                            <div class="header-btn d-none d-md-block">
                                                                                ..
                                                                            </div>

                                                                            <!-- Start Mobile-Menu-Bar -->
                                                                            <div class="mobile-menu-bar ml--10 d-block d-lg-none">
                                                                                ..
                                                                            </div>
                                                                            <!-- Start Mobile-Menu-Bar -->

                                                                            <!-- Start admin Area  -->
                                                                            <div class="account-access rbt-user-wrapper right-align-dropdown">
                                                                                ..
                                                                            </div>
                                                                            <!-- Start admin Area  -->

                                                                            <div class="expand-btn-grp @@display-class">
                                                                                <button class="bg-solid-primary popup-dashboardright-btn"><i class="feather-sidebar right"></i></button>                                    
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </header>

All Elemnts and Shortcode Types

Welcome to AIwave Elements and Shortcode! You can select any elements & shortcode and customize easily and build your website.

Buttons

This the button classes on an <a> and <button> element and create various button.

                                                    
                                                        <!-- Start Buttons  -->
                                                        <a class="btn-default btn-small" href="#">Button Solid
                                                            <i class="feather-arrow-right"></i>
                                                        </a>
                                                        <a class="btn-default btn-medium" href="#">Button Solid
                                                            <i class="feather-arrow-right"></i>
                                                        </a>
                                                        <a class="btn-default btn-large" href="#">Button Solid
                                                            <i class="feather-arrow-right"></i>
                                                        </a>
                                                        <a class="btn-default btn-extra-large" href="#">Button Solid
                                                            <i class="feather-arrow-right"></i>
                                                        </a>
                                                        <!-- End Buttons  -->

                                                    
                                                        <!-- Start Buttons  -->
                                                        <a class="btn-default btn-border btn-small" href="#">Button Solid
                                                            <i class="feather-arrow-right"></i>
                                                        </a>
                                                        <a class="btn-default btn-border btn-medium" href="#">Button Solid
                                                            <i class="feather-arrow-right"></i>
                                                        </a>
                                                        <a class="btn-default btn-border btn-large" href="#">Button Solid
                                                            <i class="feather-arrow-right"></i>
                                                        </a>
                                                        <a class="btn-default btn-border btn-extra-large" href="#">Button Solid
                                                            <i class="feather-arrow-right"></i>
                                                        </a>
                                                        <!-- End Buttons  -->

                                                    
                                                        <!-- Start Buttons  -->
                                                        <a class="btn-default text-underline" href="#">
                                                            <span>View More</span>
                                                        </a>
                                                        <a class="btn-read-more" href="#"><span>View More</span></a>
                                                        <a class="btn-default round" href="#">
                                                            <span>View More</span>
                                                        </a>
                                                        <a class="btn-default square" href="#">
                                                            <span>View More</span>
                                                        </a>
                                                        <a class="btn-default rounded-player popup-video" href="https://www.youtube.com/watch?v=tj9-MGHCs38">
                                                            <span><i class="feather-play"></i></span>
                                                        </a>
                                                        <a class="btn-default rounded-player popup-video border" href="https://www.youtube.com/watch?v=tj9-MGHCs38">
                                                            <span><i class="feather-play"></i></span>
                                                        </a>

Style guide

Extend the default collapse behavior to create an Styleguide with the panel component see the code for better understanding

                                                    

                                                        <!-- Start Style Guide Area -->
                                                        <div class="rbt-style-guide-area rbt-utilize-area rainbow-section-gap-big">
                                                            <div class="container">
                                                                <div class="row g-5">
                                                                    <div class="col-lg-3">
                                                                        <div class="rbt-default-sidebar sticky-top rbt-shadow-box rbt-gradient-border">
                                                                            <div class="inner">
                                                                                <div class="content-item-content">
                                                                                    <div class="rbt-widget-details">
                                                                                        <nav class="onepagenav">
                                                                                            ..
                                                                                        </nav>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-9">
                                                
                                                                        <div id="colorPalette" class="rbt-elements-area rbt-shadow-box mb--60">
                                                                            ..
                                                                        </div>
                                                
                                                
                                                                        <div id="gradient" class="rbt-elements-color rbt-shadow-box mb--60">
                                                                            ..
                                                                        </div>
                                                
                                                
                                                                        <div id="typography" class="rbt-elements-area rbt-shadow-box mb--60">
                                                                            ..
                                                                        </div>
                                                
                                                                        <div id="formElements" class="rbt-elements-area rbt-shadow-box mb--60">
                                                                            ..
                                                                        </div>
                                                
                                                                        <div id="pagination" class="rbt-elements-area rbt-shadow-box mb--60">
                                                                            ..
                                                                        </div>
                                                
                                                                        <div id="avatars" class="rbt-elements-area rbt-shadow-box mb--60">
                                                                            ..
                                                                        </div>
                                                
                                                                        <div id="animatedHeading" class="rbt-elements-area rbt-shadow-box mb--60">
                                                                            ..
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End Style Guide Area -->

User Guide

You can create an User Guide with the panel component see the code for better understanding

                                                    

                                                        <!-- Start Style Guide Area -->
                                                        <div class="rbt-utilize-area rainbow-section-gap-big">
                                                            <div class="container">
                                                                <div class="utilize-inner">
                                                                    <div class="row g-5">
                                                                        <div class="col-lg-3">
                                                                            <div class="rbt-default-sidebar sticky-top rbt-shadow-box">
                                                                                ..
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-9 inner-content pl--0">
                                                                            ..
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End Style Guide Area -->

Toolsbar On Modal

You can create an Toolsbar On Modal with the panel component see the code for better understanding

                                                    

                                                        <!--New Chat Section Modal HTML -->
                                                        <div id="newchatModal" class="modal rbt-modal-box copy-modal fade" tabindex="-1">
                                                            <div class="modal-dialog modal-dialog-centered">
                                                                <div class="modal-content wrapper top-flashlight light-xl">
                                                                    <div class="section-title text-center mb--30 sal-animate" data-sal="slide-up" data-sal-duration="400" data-sal-delay="150">
                                                                        <h3 class="title mb--0 w-600">Unlock the power of AI</h3>
                                                                    </div>
                                                                    <div class="genarator-section">
                                                                        ..
                                                                    </div>
                                                                    <button class="close-button" data-bs-dismiss="modal">
                                                                        <i class="feather-x"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

Left Sidebar

You can create an Dashboard Left Sidebar with the panel component see the code for better understanding

                                                    
                                                        <!--Start Left panel -->
                                                        <div class="rbt-left-panel popup-dashboardleft-section">
                                                            <div class="rbt-default-sidebar">
                                                                <div class="inner">
                                                                    <div class="content-item-content">
                                                                        <div class="rbt-default-sidebar-wrapper">
                                                                            ..
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="subscription-box">
                                                                    ..
                                                                </div>
                                                                <p class="subscription-copyright copyright-text text-center b4  small-text">..</p>
                                                            </div>
                                                        </div>
                                                        <!-- End Left panel -->

Rifgt Sidebar

You can create an Dashboard Right Sidebar with the panel component see the code for better understanding

                                                    
                                                        <!-- Dashboard Right Content -->
                                                        <div class="rbt-right-side-panel popup-dashboardright-section">
                                                                                
                                                            <div class="right-side-top">
                                                                ..
                                                            </div>
                                                            <div class="right-side-bottom">
                                                                ..
                                                            </div>
                                                        </div>
                                                        <!-- End Left panel -->

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

Footer Style

Welcome to AIwave Footer You can select any footer & customize easily and build your website.

Footer Default

Awesome Footer styles. See below image and code for more information.

                                                    

                                                        <!-- Start Footer Area  -->
                                                        <footer class="rainbow-footer footer-style-default footer-style-3 position-relative">
                                                            <div class="footer-top">
                                                                <div class="container">
                                                                    <div class="row justify-content-between">
                                                                        <div class="col-lg-4 col-md-6 col-sm-12 col-12">
                                                                            <div class="rainbow-footer-widget">
                                                                                ..
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-2 col-md-6 col-sm-6 col-12">
                                                                            <div class="rainbow-footer-widget">
                                                                                <div class="widget-menu-bottom">
                                                                                    ..
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-2 col-md-6 col-sm-6 col-12">
                                                                            <div class="rainbow-footer-widget">
                                                                                ..
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                                                                            <div class="rainbow-footer-widget">
                                                                                ..
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </footer>
                                                        <!-- End Footer Area  -->

Sources and Credits

We've used the following fonts, free icons and plugins as listed:

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.

10 March 2024

Init release

1.0.0

NewTheme release

Still stuck? How can we help?

If you like our product. Please Rate Us