Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data


< > BotCompany Repo | #1028275 - NewChatBotDesign

JavaX fragment (include) [tags: use-pretranspiled]

Libraryless. Click here for Pure Java version (2983L/20K).

// Hussain Mill's design
sclass NewChatBotDesign {
  bool loadJQuery = true;
  S headStuff() {
    ret hStylesheetSnippet(#1028274) + mls_unindent([[
      <!-- Fonts -->
      <link rel="stylesheet" type="text/css" href="">
      <link href=";500;600;700;800&display=swap" rel="stylesheet">
  S demoBodyStuff() {
    ret mls_unindent([[
      <div class="chatbot">
          <div class="chat-box">
              <div class="chat">
                  <div class="chat_header">
                  <div id="chat_converse" class="chat_conversion chat_converse">
                      <span class="chat_msg_item chat_msg_item_admin">
                          <div class="chat_avatar">
                             <img src=""/>
                          Hey there! Any question?
                      <span class="chat_msg_item chat_msg_item_user">Hello!</span>
                      <span class="status">20m ago</span>
                      <span class="chat_msg_item chat_msg_item_admin">
                          <div class="chat_avatar">
                             <img src=""/>
                          </div>Hey! Would you like to talk sales, support, or anyone?
                      <span class="chat_msg_item chat_msg_item_user">
                          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      <span class="status2">Just now.</span>
                  <div id="wave">
                      <h4>User is typing</h4>
                      <span class="dot"></span>
                      <span class="dot"></span>
                      <span class="dot"></span>
                  <div class="chat-bottom">
                      <a class="camera-icon"><i class="fas fa-camera"></i></a>
                      <a class="send-icon"><i class="fas fa-paper-plane"></i></a>
                      <input type="text" name="chat_message" placeholder="Send a message" class="chat_field chat_message" />
              <a class="chat-icon"><i class="fas fa-comment-dots"></i></a>
      <!-- Chatbot Ends -->

      ]]) + stringIf(loadJQuery, [[
      <script src="" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>]]) + mls_unindent([[
      <script type="text/javascript">

          $('.chat-icon').click(function() {

          //Toggle chat and links
          function toggleFab() {
              $('.chat-icon i').toggleClass('fa-comment-dots');
              $('.chat-icon i').toggleClass('fa-times');
              $('.chat-icon i').toggleClass('is-active');
              $('.chat-icon i').toggleClass('is-visible');

          function hideChat(hide) {
              switch (hide) {
              case 1:
                  $('#chat_converse').css('display', 'block');

          // Text Animation
          $(".chat_field.chat_message").focus(function() {
              //return false;
          $('.chat_field.chat_message').blur(function() {
              if( !$(this).val() ) {

download  show line numbers  debug dex   

Travelled to 6 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, xrpafgyirdlv

No comments. add comment

Snippet ID: #1028275
Snippet name: NewChatBotDesign
Eternal ID of this version: #1028275/4
Text MD5: 68c8105660f1173dbb36ca03e6722213
Transpilation MD5: d8ed73fdbc24f9764776af4c8efffd81
Author: stefan
Category: javax / html
Type: JavaX fragment (include)
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2020-06-05 18:37:46
Source code size: 4283 bytes / 102 lines
Pitched / IR pitched: No / No
Views / Downloads: 58 / 180
Version history: 3 change(s)
Referenced in: [show references]

Formerly at &