Embed form as popup (#124)

* Embed form as popup

* minify true
This commit is contained in:
Chirag Chhatrala 2023-05-19 19:36:48 +05:30 committed by GitHub
parent 60e1f6d6c3
commit d2f4c1f358
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 367 additions and 5 deletions

20
public/widgets/embed-min.js vendored Normal file
View File

@ -0,0 +1,20 @@
!(function (n, e) {
if (typeof document !== 'undefined') {
const e = document.head || document.getElementsByTagName('head')[0]; const t = document.createElement('style')
t.type = 'text/css', e.appendChild(t), t.styleSheet ? t.styleSheet.cssText = n : t.appendChild(document.createTextNode(n))
}
}('.nf-main {\n position: fixed;\n width: 100%;\n height: 100vh;\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n z-index: 500;\n pointer-events: none;\n }\n .nf-main .nf-emoji {\n pointer-events: auto;\n width:60px;\n height: 60px;\n display: flex;\n align-items:center;\n justify-content:center;\n text-align: center;\n background-color: #3B82F6;\n padding: 8px 10px;\n border: none;\n cursor: pointer;\n position: fixed;\n bottom: 23px;\n right: 28px;\n border-radius: 100%;\n z-index: 999\n }\n .nf-main.nf-left .nf-emoji{\n left: 28px !important;\n right: inherit !important\n }\n .nf-main .nf-emoji .nf-emoji-icon, .nf-main .nf-emoji .nf-emoji-icon-close{\n font-size: 30px;\n color:white;\n }\n .nf-main .nf-emoji .nf-emoji-icon-close {\n display: none;\n }\n .nf-main.open .nf-emoji .nf-emoji-icon{\n display: none !important\n }\n .nf-main.open .nf-emoji .nf-emoji-icon-close{\n display: block !important\n }\n .nf-main .nf-popup {\n\n display: flex;\n align-items: end;\n flex-direction: column-reverse;\n align-content: flex-end;\n padding: 20px;\n padding-bottom: 100px;\n width: 100%;\n height: 100vh;\n visibility: hidden;\n opacity:0; transition:\n opacity 0.2s, 0.2s ease-in-out;\n transform: translateY(30px);\n }\n .nf-main.open .nf-popup {\n visibility: visible !important;\n opacity: 1;\n transform: translateY(0px);\n }\n .nf-main .nf-popup iframe {\n width: 100%;\n pointer-events: auto;\n z-index: 999!important;\n bottom: 100px;\n right: 20px;\n height: 450px;\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 6px 6px 0 rgba(0,0,0,.02),0 8px 24px 0 rgba(0,0,0,.12)!important\n }\n .nf-main.nf-left .nf-popup {\n align-items: start !important;\n }')), (function () {
const n = JSON.parse(document.currentScript.getAttribute('data-nf'))
let e = n?.formurl || null
if (window.location !== window.parent.location || window.frameElement || !e) return !1
e = e + (e.indexOf('?') === -1 ? '?' : '&') + 'popup=true'
const t = n?.emoji || '💬'; const i = n?.position === 'left' ? 'nf-left' : ''; const o = n?.bgcolor || '#3B82F6'
const a = n?.width || 500; const r = document.body.querySelector('.nf-main')
r && r.remove()
const p = document.createElement('div')
p.className = `nf-main ${i}`, p.innerHTML = `<div class='nf-popup'><iframe src='${e}' frameborder='0' marginheight='0' marginwidth='0' title='OpnForm'></iframe></div>`
p.querySelector('iframe').style.maxWidth = `${a}px`
const s = document.createElement('div')
s.className = 'nf-emoji', s.role = 'button', s.style.backgroundColor = `${o}`, s.innerHTML = `<span class='nf-emoji-icon'>${t}</span><span class='nf-emoji-icon-close'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'>\n <path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />\n</svg>\n</span>`, s.onclick = () => { p.classList.toggle('open') }, p.appendChild(s), document.body.appendChild(p)
}())

139
public/widgets/embed.js vendored Normal file
View File

@ -0,0 +1,139 @@
/**
* OpenForms Embed, allowing you to add a popup form to your website.
* All changes to this file should be followed by an update of the minified version (embed-min.js)
*/
!(function () {
!(function (e, t) {
if (e && typeof document !== 'undefined') {
const head = document.head || document.getElementsByTagName('head')[0]
const styleEl = document.createElement('style')
styleEl.type = 'text/css', head.appendChild(styleEl), styleEl.styleSheet ? styleEl.styleSheet.cssText = e : styleEl.appendChild(document.createTextNode(e))
}
}
(`.nf-main {
position: fixed;
width: 100%;
height: 100vh;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 500;
pointer-events: none;
}
.nf-main .nf-emoji {
pointer-events: auto;
width:60px;
height: 60px;
display: flex;
align-items:center;
justify-content:center;
text-align: center;
background-color: #3B82F6;
padding: 8px 10px;
border: none;
cursor: pointer;
position: fixed;
bottom: 23px;
right: 28px;
border-radius: 100%;
z-index: 999
}
.nf-main.nf-left .nf-emoji{
left: 28px !important;
right: inherit !important
}
.nf-main .nf-emoji .nf-emoji-icon, .nf-main .nf-emoji .nf-emoji-icon-close{
font-size: 30px;
color:white;
}
.nf-main .nf-emoji .nf-emoji-icon-close {
display: none;
}
.nf-main.open .nf-emoji .nf-emoji-icon{
display: none !important
}
.nf-main.open .nf-emoji .nf-emoji-icon-close{
display: block !important
}
.nf-main .nf-popup {
display: flex;
align-items: end;
flex-direction: column-reverse;
align-content: flex-end;
padding: 20px;
padding-bottom: 100px;
width: 100%;
height: 100vh;
visibility: hidden;
opacity:0; transition:
opacity 0.2s, 0.2s ease-in-out;
transform: translateY(30px);
}
.nf-main.open .nf-popup {
visibility: visible !important;
opacity: 1;
transform: translateY(0px);
}
.nf-main .nf-popup iframe {
width: 100%;
pointer-events: auto;
z-index: 999!important;
bottom: 100px;
right: 20px;
height: 450px;
background: #fff;
border-radius: 12px;
box-shadow: 0 6px 6px 0 rgba(0,0,0,.02),0 8px 24px 0 rgba(0,0,0,.12)!important
}
.nf-main.nf-left .nf-popup {
align-items: start !important;
}`))
}());
(function () {
const nfData = JSON.parse(document.currentScript.getAttribute('data-nf'))
let formUrl = nfData?.formurl || null
if (window.location !== window.parent.location || window.frameElement || !formUrl) {
// Do nothing
return false
}
// Add popup param to formUrl
formUrl = formUrl + (formUrl.indexOf('?') === -1 ? '?' : '&') + 'popup=true'
// Settings
const emoji = nfData?.emoji || '💬'
const position = (nfData?.position === 'left') ? 'nf-left' : ''
const emojiBgColor = nfData?.bgcolor || '#3B82F6'
const width = nfData?.width || 500
// Remove old popup, if there
const oldEl = document.body.querySelector('.nf-main')
if (oldEl) {
oldEl.remove()
}
// Iframe popup
const mainDiv = document.createElement('div')
mainDiv.className = `nf-main ${position}`
mainDiv.innerHTML = `<div class='nf-popup'><iframe src='${formUrl}' frameborder='0' marginheight='0' marginwidth='0' title='OpnForm'></iframe></div>`
const iframe = mainDiv.querySelector('iframe')
iframe.style.maxWidth = `${width}px`
// Emoji button
const emojiButton = document.createElement('div')
emojiButton.className = 'nf-emoji'
emojiButton.role = 'button'
emojiButton.style.backgroundColor = `${emojiBgColor}`
emojiButton.innerHTML = `<span class='nf-emoji-icon'>${emoji}</span><span class='nf-emoji-icon-close'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'>
<path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />
</svg>
</span>`
emojiButton.onclick = () => { mainDiv.classList.toggle('open') }
mainDiv.appendChild(emojiButton)
// Append to the body
document.body.appendChild(mainDiv)
})()

View File

@ -1,6 +1,6 @@
<template> <template>
<div v-if="form" class="open-complete-form"> <div v-if="form" class="open-complete-form">
<h1 v-if="!isHideTitle" class="mb-4 px-2" v-text="form.title" /> <h1 v-if="!isHideTitle" class="mb-4 px-2" :class="{&quot;mt-4&quot;:isEmbedPopup}" v-text="form.title" />
<div v-if="isPublicFormPage && form.is_password_protected"> <div v-if="isPublicFormPage && form.is_password_protected">
<p class="form-description mb-4 text-gray-700 dark:text-gray-300 px-2"> <p class="form-description mb-4 text-gray-700 dark:text-gray-300 px-2">
@ -158,6 +158,9 @@ export default {
isIframe () { isIframe () {
return window.location !== window.parent.location || window.frameElement return window.location !== window.parent.location || window.frameElement
}, },
isEmbedPopup () {
return window.location.href.includes('popup=true')
},
theme () { theme () {
return this.themes[this.themes.hasOwnProperty(this.form.theme) ? this.form.theme : 'default'] return this.themes[this.themes.hasOwnProperty(this.form.theme) ? this.form.theme : 'default']
}, },

View File

@ -0,0 +1,196 @@
<template>
<div>
<v-button
class="w-full"
color="light-gray"
v-track.share_embed_form_popup_click="{form_id:form.id, form_slug:form.slug}"
@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>&lt;head&gt;</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" :default-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"
: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 '../../../common/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 () {
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 () {
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 (!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>

View File

@ -11,7 +11,9 @@
<div class="mt-6 pt-6 border-t w-full flex"> <div class="mt-6 pt-6 border-t w-full flex">
<regenerate-form-link class="sm:w-1/2 mr-4" :form="form" /> <regenerate-form-link class="sm:w-1/2 mr-4" :form="form" />
<url-form-prefill class="sm:w-1/2" :form="form" :extra-query-param="shareUrlForQueryParams" /> <url-form-prefill class="sm:w-1/2 mr-4" :form="form" :extra-query-param="shareUrlForQueryParams" />
<embed-form-as-popup-modal class="sm:w-1/2" :form="form" />
</div> </div>
</div> </div>
</template> </template>
@ -24,6 +26,7 @@ import UrlFormPrefill from '../../../components/pages/forms/show/UrlFormPrefill.
import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink.vue' import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink.vue'
import SeoMeta from '../../../mixins/seo-meta.js' import SeoMeta from '../../../mixins/seo-meta.js'
import AdvancedFormUrlSettings from '../../../components/open/forms/components/AdvancedFormUrlSettings.vue' import AdvancedFormUrlSettings from '../../../components/open/forms/components/AdvancedFormUrlSettings.vue'
import EmbedFormAsPopupModal from '../../../components/pages/forms/show/EmbedFormAsPopupModal.vue'
export default { export default {
components: { components: {
@ -32,7 +35,8 @@ export default {
FormQrCode, FormQrCode,
UrlFormPrefill, UrlFormPrefill,
RegenerateFormLink, RegenerateFormLink,
AdvancedFormUrlSettings AdvancedFormUrlSettings,
EmbedFormAsPopupModal
}, },
props: { props: {
form: { type: Object, required: true } form: { type: Object, required: true }

4
vite.config.js vendored
View File

@ -4,8 +4,8 @@ import vue from '@vitejs/plugin-vue2'
export default defineConfig({ export default defineConfig({
esbuild: { esbuild: {
minify: false, minify: true,
minifySyntax: false minifySyntax: true
}, },
plugins: [ plugins: [
laravel({ laravel({