Embed form as popup (#124)

* Embed form as popup

* minify true

public/widgets/embed-min.js

@@ -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)
+  }())
+  

public/widgets/embed.js

@@ -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)
+})()

resources/js/components/open/forms/OpenCompleteForm.vue

@@ -1,6 +1,6 @@
 <template>
   <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">
       <p class="form-description mb-4 text-gray-700 dark:text-gray-300 px-2">
@@ -158,6 +158,9 @@ export default {
     isIframe () {
       return window.location !== window.parent.location || window.frameElement
     },
+    isEmbedPopup () {
+      return window.location.href.includes('popup=true')
+    },
     theme () {
       return this.themes[this.themes.hasOwnProperty(this.form.theme) ? this.form.theme : 'default']
     },

resources/js/components/pages/forms/show/EmbedFormAsPopupModal.vue

@@ -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>

resources/js/pages/forms/show/share.vue

@@ -11,7 +11,9 @@
     <div class="mt-6 pt-6 border-t w-full flex">
       <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>
 </template>
@@ -24,6 +26,7 @@ import UrlFormPrefill from '../../../components/pages/forms/show/UrlFormPrefill.
 import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink.vue'
 import SeoMeta from '../../../mixins/seo-meta.js'
 import AdvancedFormUrlSettings from '../../../components/open/forms/components/AdvancedFormUrlSettings.vue'
+import EmbedFormAsPopupModal from '../../../components/pages/forms/show/EmbedFormAsPopupModal.vue'
 
 export default {
   components: {
@@ -32,7 +35,8 @@ export default {
     FormQrCode,
     UrlFormPrefill,
     RegenerateFormLink,
-    AdvancedFormUrlSettings
+    AdvancedFormUrlSettings,
+    EmbedFormAsPopupModal
   },
   props: {
     form: { type: Object, required: true }

vite.config.js

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