floating website chat button

ran-j

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>

s.molinari

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

ran-j

@s-molinari thank you.

ran-j

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.

s.molinari

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

Scott

ran-j

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’
],

ran-j

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

No More Posting New Topics!

floating website chat button