Scroll to Top

Chat box

Simple Chat box for your client or bot Chatting Front end.

SITEMAP Documentation / Components / Chat box

Demo

Live Chat

How can we help you?

Code copy

<!-- Initialize the button which will open the chatbot -->    
    <a class="btn btn-dark open-chat" data-target="#OpenChatBox">Live Chat</a>
    
    <div class="chatbox exit blue6 text-grey8" id="OpenChatBox" alt-tab=".minimize-btn" close-btn="#close-btn">
        <div class="chat-head borderB-lowdark shadow-dark-1">
            <div class="row pad-10">
                <div class="col m8 l8 s12">
                    <h4><a class="text-hover-white text-grey3 font-10-on-s minimize-btn">Live Chat</a></h4>
                </div>
                <div class="col m4 l4 s12 text-right">
                    <a class="padY-10 padX-5 text-hover-white text-grey3 minimize-btn"><i class="fas fa-minus"></i></a>
                    <a class="padY-10 padX-5 text-hover-white text-grey3" id="close-btn"><i class="fas fa-times"></i></a>
                </div>
            </div>
        </div>
        <div class="chat-body white padY-10 padX-5 borderX-lowdark">
            <div class="row margin-10 pad-10 grey3 text-grey8">
                <div class="col m12 l12 s12">
                    <p class="text-justify">How can we help you?</p>
                </div>
            </div>
        </div>
        <div class="chat-footer borderT-lowdark shadow-dark-1">
            <div class="row padX-10 padY-5">
                <div class="col m9 l9 s12">
                    <input type="text" class="form-control" placeholder="Message">
                </div>
                <div class="col m3 l3 s12">
                    <a class="block text-center padX-10 padT-5 text-hover-white text-grey3">Send <i class="fas fa-caret-right"></i></a>
                </div>
            </div>
        </div>
    </div>

Feedback