Skip to content

Instantly share code, notes, and snippets.

@Karytonn
Last active December 1, 2022 16:44
Show Gist options
  • Save Karytonn/86ad00b8a1f95a17f56bc5f0cceaff87 to your computer and use it in GitHub Desktop.
Save Karytonn/86ad00b8a1f95a17f56bc5f0cceaff87 to your computer and use it in GitHub Desktop.
Nuxt JS - WhatsApp Card
<template>
<div class="fixed right-6 bottom-6">
<transition
enter-active-class="animate__animated animate__fadeInRight"
mode="out-in"
>
<!-- CARD TO SEND MESSAGE -->
<div v-if="isOpen">
<div class="w-96 max-w-[90vw] rounded-3xl overflow-hidden shadow-2xl shadow-[#075E54]/50 bg-[#E7E7E7]">
<!-- Header and close button -->
<div class="h-20 p-5 flex items-center justify-between gap-4 bg-[#25D366]">
<div class="flex items-center gap-3">
<img class="w-7 h-28" src="@/assets/icon/header/whatsapp.svg" alt="WP">
<p class="text-lg font-medium text-white">WhatsApp</p>
</div>
<button @click="isOpen = false" class="hover:rotate-12 hover:scale-110" title="Fechar">
<img src="@/assets/icon/close.svg" alt="Fechar" class="w-8 h-8">
</button>
</div>
<!-- Message input -->
<div class="p-4 py-6">
<input type="text" name="message" id="message" v-model="form.message" maxlength="140" title="Mensagem"
class="w-full px-4 py-4 rounded-full text-sm border-none text-[#075E54]">
</div>
<!-- Send button -->
<div class="w-full p-4 flex justify-end">
<button @click="goToWhatsAppChat" id="send-whatsapp-message" title="Enviar mensagem"
class="px-5 py-2 rounded-full flex items-center justify-between gap-1 bg-[#25D366] hover:scale-105 hover:shadow-lg hover:shadow-[#075E54]/30 transition-all duration-300">
<p class="font-medium text-white">Abrir Conversa</p>
<img src="@/assets/icon/send.svg" alt="Enviar">
</button>
</div>
</div>
</div>
<!-- BUTTON TO OPEN SEND MESSAGE CARD -->
<button v-else @click="openWhatsAppCard" id="open-whatsapp-card"
class="w-16 h-16 rounded-full grid place-content-center hover:scale-105 transition-all duration-300 bg-[#25D366] shadow-xl shadow-[#075E54]/20" title="WhatsApp">
<img src="@/assets/icon/header/whatsapp.svg" alt="WhatsApp" class="w-8 h-8">
</button>
</transition>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
isOpen: false,
form: {
message: "Falar com nossa equipe agora!",
number: '5562988887777'
}
}
},
methods: {
openWhatsAppCard() {
this.form.message = "Falar com nossa equipe agora!"
this.isOpen = true
// ... Dispare qualquer outra coisa aqui
},
goToWhatsAppChat() {
this.isOpen = false;
let message = (this.form.message === "Falar com nossa equipe agora!")? " " : this.form.message;
window.open(`https://api.whatsapp.com/send?phone=${this.form.number}&text=${message}`, '_blank')
this.form.message = "Falar com nossa equipe agora!"
// ... Dispare qualquer outra coisa aqui
}
}
});
</script>
<style scoped>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment