Advanced measures for embedding Dropboard

Before proceeding

The instructions shown here are for extreme situations where a website builder may make it difficult or impossible to place the simple Dropboard script in your page's HTML.

It won't hurt to follow these instructions, but the simple Dropboard embed will work in most cases and is much easier to do.

Now that we know we're here because a website builder is making it hard to inject the Dropboard script, let's look at the advanced way to add Dropboard to a web page using pure JavaScript.


Method #1

Some website builders, or plugins like Berq, will add a cache around your scripts that can cause issues. You can either try to whitelist/exclude Dropboard from this or modify our script slightly by adding a data-root-url attribute to the script like so:

<script
  type="text/javascript"
  src="https://dropboardhq.com/embed/script.js"
  data-org="[UNIQUE VALUE HERE]"
  data-page="[UNIQUE VALUE HERE]"
  data-root-url="https://dropboardhq.com"
></script>

Method #2

What you'll need

In the optimal case, your website builder gives you a place to add a <script></script> element to your page's HTML code in the spot where you want Dropboard. If this is possible, we again urge you to go these simpler instructions and just copy your Dropboard script into your page's HTML.

Failing that, you'll need a place in your website builder where they let you add JavaScript code. They should let you add JavaScript to either the <head> or <body> tag of your page/site.


1. Find your "org" and "page" values

Using the Dropboard instructions, look for the data-org and data-page values in your embed's code. As an example, when we get the install instructions from Dropboard like so:

It may look like this:

<script
  type="text/javascript"
  src="https://dropboardhq.com/embed/script.js"
  data-org="ABCD"
  data-page="ZYXWV"
></script>

The "org" value you need in this example is "ABCD" and the "page" value you need is "ZYXWV".


2. Add a dummy element where you want Dropboard

Add a <DIV> element to your page and give it an ID that our script can find. Example:

<div id="put-dropboard-here">

If your website builder won't let you do that, you can instead just add the text "Dropboard loading here" on your page where you want Dropboard to be:

<div>
  Dropboard loading here
</div>

3. Add our advanced script

Copy the big JavaScript code block below this section, but change the two values shown:

  1. Replace [INSERT ORG HERE] with the "org" value (in our example, that's ABCD)
  2. Replace [INSERT PAGE HERE] with the "page" value (in our example, that'sZYXWV)

Take your modified script and add it wherever your website builder lets you install JavaScript code.

That's it - you did it! 🥳

💡 If your website builder only lets you inject HTML content as a global setting (as opposed to raw JavaScript content), you can wrap your javascript code in an HTML tag like this:

<script type="text/javascript">[PASTE CODE HERE]</script> 

(function(){
const ORG='[INSERT ORG HERE]';
const PAGE='[INSERT PAGE HERE]';

const PAGES_BY_URL=[{path:'*',page:PAGE}];const ID_MATCH='put-dropboard-here';const TEXT_MATCH='Dropboard loading here';const JQUERY_URL='https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js';const MAX_TIME_TO_USE_FINAL_CALLBACK=1000*5;const TAGS_TO_IGNORE=['script','body','html'];let phase='initial';async function waitForJQuery(iteration=1){return new Promise((ok,fail)=>{setTimeout(()=>{if(typeof jQuery!=='undefined'){ok(jQuery);return}if(iteration>5){fail()}waitForJQuery(iteration+1).then(()=>ok(jQuery)).catch(fail)},100)})}async function installJQuery(){const el=document.createElement('script');el.type='text/javascript';el.src=JQUERY_URL;return new Promise((ok)=>{const listener=()=>{waitForJQuery().then(ok);el.removeEventListener('load',listener)};el.addEventListener('load',listener);document.body.appendChild(el)})}async function ensureJQueryIsReady(){if(typeof jQuery!=='undefined'){return jQuery}try{return await waitForJQuery()}catch(error){return await installJQuery()}}function getPage(){const path=window.location.pathname.toLowerCase();const found=PAGES_BY_URL.find((test)=>test.path.toLowerCase()===path||test.path==='*',);if(found){return found.page}}function injectDropboard(parentEl){const PAGE=getPage();if(!PAGE){phase='disconnected';return}const el=document.createElement('script');el.type='text/javascript';el.src='https://dropboardhq.com/embed/script.js';el.dataset.org=ORG;el.dataset.page=PAGE;parentEl.appendChild(el);phase='connected';listenForElementDisconnect(el)}function findParentElementById(){return document.getElementById(ID_MATCH)}function findParentElementByInnerText(jQuery){const matches=jQuery(`*:contains('${ TEXT_MATCH }')`).toArray();const filteredMatches=matches.filter((test)=>{if(!test.tagName){return false}if(TAGS_TO_IGNORE.includes(test.tagName.toLowerCase())){return false}return true});const parent=filteredMatches[filteredMatches.length-1];if(parent){parent.innerHTML=''}return parent}function listenForElementDisconnect(el){let isInDom=document.body.contains(el);let observer=new MutationObserver((mutations)=>{if(document.body.contains(el)){isInDom=true}else if(isInDom){isInDom=false;observer.disconnect();phase='disconnected'}});observer.observe(document.body,{childList:true,subtree:true})}async function waitForDocumentToFinishLoading(){if(document.readyState==='complete'||document.readyState==='loaded'){return}return new Promise((ok)=>{document.addEventListener('DOMContentLoaded',ok,{once:true})})}async function pickParentElement(){let byId=findParentElementById();if(byId){return byId}await waitForDocumentToFinishLoading();byId=findParentElementById();if(byId){return byId}const jQuery=await ensureJQueryIsReady();return findParentElementByInnerText(jQuery)}async function tryPickingParentElementUntilTimeout(startTime=new Date()){let parentElement=await pickParentElement();if(parentElement){return parentElement}const elapsedTime=new Date().valueOf()-startTime.valueOf();if(elapsedTime>=MAX_TIME_TO_USE_FINAL_CALLBACK){return}await new Promise((ok)=>setTimeout(ok,100));return await tryPickingParentElementUntilTimeout(startTime)}function reconnectIfApplicable(){if(phase!=='disconnected'){return}tryPickingParentElementUntilTimeout().then((parentElement)=>{if(parentElement){injectDropboard(parentElement)}})}tryPickingParentElementUntilTimeout().then((parentElement)=>{if(parentElement){injectDropboard(parentElement)}});setInterval(reconnectIfApplicable,500)})();


There area in your website builder that you're looking for might look something like this:


Troubleshooting

If you see something like this:

Or this:

Then you likely copy/pasted the wrong "org" and "page" values on step 3. Go back and make sure those values came from where you found them in step 2.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us