200 lines
7.3 KiB
Vue
200 lines
7.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<v-button
|
||
|
|
v-track.share_embed_form_popup_click="{form_id:form.id, form_slug:form.slug}"
|
||
|
|
class="w-full"
|
||
|
|
color="light-gray"
|
||
|
|
@click="showEmbedFormAsPopupModal=true"
|
||
|
|
>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4 text-blue-600 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||
|
|
d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
Embed form as popup
|
||
|
|
</v-button>
|
||
|
|
|
||
|
|
<modal :show="showEmbedFormAsPopupModal" @close="onClose">
|
||
|
|
<template #icon>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||
|
|
d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</template>
|
||
|
|
<template #title>
|
||
|
|
<span>Add the popup to your website</span>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<div class="p-4">
|
||
|
|
<h3 class="border-t text-xl font-semibold mb-2 pt-6">
|
||
|
|
Demo
|
||
|
|
</h3>
|
||
|
|
<p class="pb-6">
|
||
|
|
A live preview of your form popup was just added to this page. <span class="font-semibold text-blue-800">Click on the button on the bottom
|
||
|
|
{{ advancedOptions.position }} corner to try it</span>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3 class="border-t text-xl font-semibold mb-2 pt-6">
|
||
|
|
How does it work?
|
||
|
|
</h3>
|
||
|
|
<p>Paste the following code snippet in the <b><head></b> section of your website.</p>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-4 mb-5 w-full mx-auto mt-4 select-all"
|
||
|
|
>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<p class="select-all text-nt-blue flex-grow break-all">
|
||
|
|
{{ embedPopupCode }}
|
||
|
|
</p>
|
||
|
|
<div class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer" @click="copyToClipboard">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-nt-blue" fill="none" viewBox="0 0 24 24"
|
||
|
|
stroke="currentColor"
|
||
|
|
>
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
|
|
d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<collapse class="py-5 w-full border rounded-md px-4" :model-value="false">
|
||
|
|
<template #title>
|
||
|
|
<div class="flex">
|
||
|
|
<h3 class="font-semibold block text-lg">
|
||
|
|
Advanced options
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<div class="border-t mt-4 -mx-4" />
|
||
|
|
<toggle-switch-input v-model="advancedOptions.hide_title" name="hide_title" class="mt-4"
|
||
|
|
label="Hide Form Title"
|
||
|
|
:disabled="(form.hide_title===true)?true:null"
|
||
|
|
:help="hideTitleHelp"
|
||
|
|
/>
|
||
|
|
<color-input v-model="advancedOptions.bgcolor" name="bgcolor" class="mt-4"
|
||
|
|
label="Circle Background Color"
|
||
|
|
/>
|
||
|
|
<text-input v-model="advancedOptions.emoji" name="emoji" class="mt-4"
|
||
|
|
label="Emoji" :max-char-limit="2"
|
||
|
|
/>
|
||
|
|
<flat-select-input v-model="advancedOptions.position" name="position" class="mt-4"
|
||
|
|
label="Position"
|
||
|
|
:options="[
|
||
|
|
{name:'Bottom Right',value:'right'},
|
||
|
|
{name:'Bottom Left',value:'left'},
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
<text-input v-model="advancedOptions.width" name="width" class="mt-4"
|
||
|
|
label="Form pop max width (px)" native-type="number"
|
||
|
|
/>
|
||
|
|
</collapse>
|
||
|
|
|
||
|
|
<div class="flex justify-end mt-4">
|
||
|
|
<v-button color="gray" shade="light" @click="onClose">
|
||
|
|
Close
|
||
|
|
</v-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</modal>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Collapse from '~/components/global/Collapse.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'EmbedFormAsPopupModal',
|
||
|
|
components: { Collapse },
|
||
|
|
props: {
|
||
|
|
form: { type: Object, required: true }
|
||
|
|
},
|
||
|
|
|
||
|
|
data: () => ({
|
||
|
|
showEmbedFormAsPopupModal: false,
|
||
|
|
embedScriptUrl: 'widgets/embed-min.js',
|
||
|
|
advancedOptions: {
|
||
|
|
hide_title: false,
|
||
|
|
emoji: '💬',
|
||
|
|
position: 'right',
|
||
|
|
bgcolor: '#3B82F6',
|
||
|
|
width: '500'
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
hideTitleHelp () {
|
||
|
|
return this.form.hide_title ? 'This option is disabled because the form title is already hidden' : null
|
||
|
|
},
|
||
|
|
shareUrl () {
|
||
|
|
return (this.advancedOptions.hide_title) ? this.form.share_url + '?hide_title=true' : this.form.share_url
|
||
|
|
},
|
||
|
|
embedPopupCode () {
|
||
|
|
const nfData = {
|
||
|
|
formurl: this.shareUrl,
|
||
|
|
emoji: this.advancedOptions.emoji,
|
||
|
|
position: this.advancedOptions.position,
|
||
|
|
bgcolor: this.advancedOptions.bgcolor,
|
||
|
|
width: this.advancedOptions.width
|
||
|
|
}
|
||
|
|
this.previewPopup(nfData)
|
||
|
|
return '<script async data-nf=\'' + JSON.stringify(nfData) + '\' src=\'' + this.asset(this.embedScriptUrl) + '\'></scrip' + 't>'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted () {
|
||
|
|
this.advancedOptions.bgcolor = this.form.color
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
onClose () {
|
||
|
|
this.removePreview()
|
||
|
|
this.$crisp.push(['do', 'chat:show'])
|
||
|
|
this.showEmbedFormAsPopupModal = false
|
||
|
|
},
|
||
|
|
copyToClipboard () {
|
||
|
|
if (process.server) return
|
||
|
|
const str = this.embedPopupCode
|
||
|
|
const el = document.createElement('textarea')
|
||
|
|
el.value = str
|
||
|
|
document.body.appendChild(el)
|
||
|
|
el.select()
|
||
|
|
document.execCommand('copy')
|
||
|
|
document.body.removeChild(el)
|
||
|
|
},
|
||
|
|
removePreview () {
|
||
|
|
if (process.server) return
|
||
|
|
const oldP = document.head.querySelector('#nf-popup-preview')
|
||
|
|
if (oldP) {
|
||
|
|
oldP.remove()
|
||
|
|
}
|
||
|
|
const oldM = document.body.querySelector('.nf-main')
|
||
|
|
if (oldM) {
|
||
|
|
oldM.remove()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
previewPopup (nfData) {
|
||
|
|
if (process.server) return
|
||
|
|
if (!this.showEmbedFormAsPopupModal) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
// Remove old preview, if there
|
||
|
|
this.removePreview()
|
||
|
|
|
||
|
|
// Hide crisp
|
||
|
|
this.$crisp.push(['do', 'chat:hide'])
|
||
|
|
|
||
|
|
// Add new preview
|
||
|
|
const el = document.createElement('script')
|
||
|
|
el.id = 'nf-popup-preview'
|
||
|
|
el.async = true
|
||
|
|
el.src = this.asset(this.embedScriptUrl)
|
||
|
|
el.setAttribute('data-nf', JSON.stringify(nfData))
|
||
|
|
document.head.appendChild(el)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|