floating website chat button



  • How can I do a chat like this https://codepen.io/neilkalman/pen/VPJpaW with qusar ?

    what I have :

    <template>
      <q-page class="flex flex-center">
        <img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
     
        <q-fab
          color="blue"
          class="fixed"
          icon="keyboard_arrow_up"
          direction="up"
          style="right: 18px; bottom: 18px"
        >
          <q-fab-action
            class="white"
            @click="someMethod()"
            icon="mail"
          />
    
          <q-fab-action
            class="white"
            @click="someMethod()"
            icon="alarm"
          />
        </q-fab>
    
        
     
      </q-page>
    </template>
    


  • Playing around. https://codepen.io/smolinari/pen/axBMZm

    It might get you started.

    Not sure a dialog is the best way to show the chat.

    Please don’t ask for more help on this, before you attempt to solve your problem on your own with more code. Once you run into a specific problem trying to make your solution, then ask a question. Thanks for your understanding.

    Scott



  • @s-molinari thank you.



  • Its giving me error on webpack :

    client?f1f8:168 ./src/pages/Index.vue?vue&type=template&id=4bc9d7de& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Index.vue?vue&type=template&id=4bc9d7de&)
    Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
    (Emitted value instead of an instance of Error)
    Error compiling template:

    <q-layout>
    <q-dialog v-model="showChatDialog" position="right">
      <q-card>
        <q-card-section>
          <div class="text-h6">This is your Chat</div>
        </q-card-section>
    
        <q-separator></q-separator>
    
        <q-card-section style="max-height: 50vh" class="scroll">
          <p v-for="n in 15" :key="n">Put Chat in here!!! Put Chat in here!!!</p>
        </q-card-section>
    
        <q-separator></q-separator>
      </q-card>
    </q-dialog>
    <q-page-container>
      <q-page padding>
        <q-page-sticky position="bottom-right" :offset="[18, 18]">
          <q-btn 
            fab
            round
            size="lg"
            color="purple"
            icon="chat"
            @click="showChatDialog = true"
          >
          </q-btn>
        </q-page-sticky>
      </q-page>
    </q-page-container>
    

    <q-layout>

    • tag <q-layout> has no matching end tag.
    • tag <q-layout> has no matching end tag.


  • As it says at the end. You are missing the end tag for <q-layout>.

    Scott



  • I fixed.

    with and </q-layout>

    components: [
    ‘QLayoutFooter’,
    ‘QPageSticky’,
    ‘QLayout’,
    ‘QLayoutHeader’,
    ‘QLayoutDrawer’,
    ‘QPageContainer’,
    ‘QPage’,
    ‘QToolbar’,
    ‘QToolbarTitle’,
    ‘QBtn’,
    ‘QIcon’,
    ‘QList’,
    ‘QListHeader’,
    ‘QItem’,
    ‘QItemMain’,
    ‘QItemSide’,
    ‘QFab’,
    ‘QFabAction’,
    ‘QCard’,
    ‘QCardTitle’,
    ‘QCardMain’,
    ‘QCardMedia’,
    ‘QCardSeparator’,
    ‘QCardActions’,
    ‘QDialog’
    ],



  • but when I run the card is like this https://imgur.com/a/s7YHtnW


Log in to reply