Skip to content

Instantly share code, notes, and snippets.

@dniccum
Created July 27, 2021 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dniccum/8bbb9277fc37cc77a2d5dd75da5ce0fe to your computer and use it in GitHub Desktop.
Save dniccum/8bbb9277fc37cc77a2d5dd75da5ce0fe to your computer and use it in GitHub Desktop.
Dynamically appends a Typeform element to a page within a method/function
const body = document.getElementsByTagName('body')[0];
const tag = document.createElement('a');
const formId = '#####'; // Change this to your specific form ID
tag.setAttribute('class', 'typeform-share button');
tag.setAttribute('href', `https://form.typeform.com/to/${formId}?typeform-medium=embed-snippet`);
tag.setAttribute('data-mode', 'popover');
tag.setAttribute('data-open', 'time');
tag.setAttribute('data-open-value', '1000');
tag.setAttribute('target', '_blank');
tag.setAttribute('style', 'width:54px;height:54px;position:fixed;box-shadow:0px 2px 12px rgba(0, 0, 0, 0.06), 0px 2px 4px rgba(0, 0, 0, 0.08);right:26px;bottom:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#38C4AC;overflow:hidden;line-height:0;');
tag.innerHTML = `<span class="icon"> <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' style="margin-top:6px;"> <path d='M21 0H0V9L10.5743 24V16.5H21C22.6567 16.5 24 15.1567 24 13.5V3C24 1.34325 22.6567 0 21 0ZM7.5 9.75C6.672 9.75 6 9.07875 6 8.25C6 7.42125 6.672 6.75 7.5 6.75C8.328 6.75 9 7.42125 9 8.25C9 9.07875 8.328 9.75 7.5 9.75ZM12.75 9.75C11.922 9.75 11.25 9.07875 11.25 8.25C11.25 7.42125 11.922 6.75 12.75 6.75C13.578 6.75 14.25 7.42125 14.25 8.25C14.25 9.07875 13.578 9.75 12.75 9.75ZM18 9.75C17.172 9.75 16.5 9.07875 16.5 8.25C16.5 7.42125 17.172 6.75 18 6.75C18.828 6.75 19.5 7.42125 19.5 8.25C19.5 9.07875 18.828 9.75 18 9.75Z' fill='white' /> </svg> </span>`;
body.appendChild(tag);
const script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.textContent = `(function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })()`;
body.appendChild(script);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment