We value your privacy
We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.
Read our policy
No AdjustReject AllNo, adjustAccept All

How to videos

Edit nav/menu

More info

Edit CTA Symbol

More info

Nav - white over navy interaction

More info

Meta titles + descriptions

More info

TEMPORARY WELLBINEG ON CATEGORY TEMPLATE

More info

Create Blog Category

More info

Website Banner

More info

Technical Documentation

Autofill form setup

More info

‍

--- ON PAGE 1

Action (for by Team template): https://go.mapiq.com/l/949332/2022-06-05/ct6mqw

Action (for by Use Case template): https://go.mapiq.com/l/949332/2022-06-05/ct6mqs

POST

‍

[Form element x1]

Add Attribute

Name: magic-autofill-element

Value: item

‍

[Form input x3]

Add Attribute

Name: magic-autofill-text

Value: Email

Add Attribute

Name: magic-autofill-submit

Value: true

Add Attribute

Name: magic-autofill-attribute

Value: value

‍

[Button x1]

Add Attribute

Name: magic-autofill-element

Value: link

‍

Add code to BOTH form page Step 1 AND Step 2 page

<!-- validate email field --><script src="https://cdn.jsdelivr.net/gh/FlowGurus/webflow-magic@1/src/email-filter.min.js"></script><script>  new WebflowMagic_EmailFilter({ BLACKLISTED_DOMAINS: 'gmail.com|yahoo.com|hotmail.com' });</script><script src="https://cdn.jsdelivr.net/gh/FlowGurus/webflow-magic@1/src/auto-fill.min.js"></script><script>  new WebflowMagic_AutoFill({HIDE_QUERY_PARAMS: true});</script>

‍

--- ON PAGE 2

Email field Name = Email

[Form x1]

Add Attribute

Name: magic-autofill-element

Value: form

‍

Blog (All Articles)

More info

Oops, it was this page >> https://www.finsweet.com/attributes/cms-load

Table of Contents

More info

<script src="https://cdn.jsdelivr.net/gh/flowgurus/webflow-magic@1/src/table-of-contents.min.js"></script>
<script>
   document.addEventListener("DOMContentLoaded", () => {
     new WebflowMagic_TableOfContents({
       TOC_ELEMENT_SELECTOR: '#toc',
       TOC_WRAP_ELEMENT_SELECTOR: '.table-of-contents',
       TOC_LIST_TAG: 'ul',
       HEADING_ELEMENTS_SELECTOR: 'h2,h3',
       CONTENT_ELEMENTS_SELECTOR: '.sections',
       TOP_OFFSET: '80px',
     });
   });

   $("#toc").css("max-height", "unset")

   function removeTOCHighlight() {
     $('ul.max-height-unset').removeClass('max-height-unset')
     $('li.toc-active').removeClass('toc-active')
   }

   function addTOCHighlight(toc_item) {
     toc_item.closest('li').addClass("toc-active")
     toc_item.closest('ul').addClass("max-height-unset")
   }

   function handleScroll() {
     removeTOCHighlight()
     const anchors = $("a.toc-anchor").filter(function () {
       return !!$(this).attr('id')
     })

     anchors.each((index, anchor) => {
       if ((index === (anchors.length - 1) && anchor.getBoundingClientRect().top < 10) || (anchor.getBoundingClientRect().top < 10 && anchors[index + 1].getBoundingClientRect().top > 10)) {
         const toc_item = $(`a[href*="#${anchor.getAttribute("id")}"]`)
         addTOCHighlight(toc_item)
         return false
       }
     })
   }

   $("div#toc a").on('click', (e) => {
     var toc_item = $(e.target)
     if (toc_item.closest('li').hasClass('toc-active')) return
     $(window).off('scroll');
     removeTOCHighlight()
     addTOCHighlight(toc_item)
     var toc_anchor = $(`a[id*=${e.target.href.split("#")[1]}]`)[0]
     $(window).on('scroll', () => {
       if (toc_anchor.getBoundingClientRect().top > 0 && toc_anchor.getBoundingClientRect().top < 10) {
         $(window).off('scroll');
         $(window).on('scroll', handleScroll)
       }
     })
   })

   $(window).on('scroll', handleScroll)
 </script>

 <style>
   #toc ul {
     padding: 0.3rem 0;
     margin: 0;
   }

   #toc li {
     background: none;
     padding: 0.3rem 0;
     margin: 0;
     font-size: 0.9rem;
   }

   #toc>ul>li {
     font-weight: 500;
   }

   #toc>ul>li>ul>li {
     font-weight: 400;
   }

   #toc ul li ul {
     max-height: 0;
     overflow: hidden;
     transition: max-height 200ms ease-in-out;
   }

   #toc li {
     display: block;
   }

   .max-height-unset {
     max-height: 500px !important;
   }

   .toc-active {
     background-image: url("https://assets-global.website-files.com/629413da027523486a7eab2d/629583ec86070f0c22f2b517_mapiq-dot-point.svg") !important;
     background-position: 0 0.75rem !important;
     background-size: 8px 8px !important;
     background-repeat: no-repeat !important;
   }

   .toc-active>a {
     color: #0aaff0;
     padding-left: 1rem;
   }

   .toc-active>ul {
     max-height: 500px !important;
   }
 </style>

‍

Content Library

More info

https://www.finsweet.com/attributes/cms-filter

Deep Dives (CMS Template)

More info

<script src="https://cdn.jsdelivr.net/gh/flowgurus/webflow-magic@1/src/table-of-contents.min.js"></script>
<script>
   document.addEventListener("DOMContentLoaded", () => {
     new WebflowMagic_TableOfContents({
       TOC_ELEMENT_SELECTOR: '#toc',
       TOC_WRAP_ELEMENT_SELECTOR: '.table-of-contents',
       TOC_LIST_TAG: 'ul',
       HEADING_ELEMENTS_SELECTOR: 'h2,h3',
       CONTENT_ELEMENTS_SELECTOR: '.sections',
       TOP_OFFSET: '80px',
     });
   });

   $("#toc").css("max-height", "unset")

   function removeTOCHighlight() {
     $('ul.max-height-unset').removeClass('max-height-unset')
     $('li.toc-active').removeClass('toc-active')
   }

   function addTOCHighlight(toc_item) {
     toc_item.closest('li').addClass("toc-active")
     toc_item.closest('ul').addClass("max-height-unset")
   }

   function handleScroll() {
     removeTOCHighlight()
     const anchors = $("a.toc-anchor").filter(function () {
       return !!$(this).attr('id')
     })

     anchors.each((index, anchor) => {
       if ((index === (anchors.length - 1) && anchor.getBoundingClientRect().top < 10) || (anchor.getBoundingClientRect().top < 10 && anchors[index + 1].getBoundingClientRect().top > 10)) {
         const toc_item = $(`a[href*="#${anchor.getAttribute("id")}"]`)
         addTOCHighlight(toc_item)
         return false
       }
     })
   }

   $("div#toc a").on('click', (e) => {
     var toc_item = $(e.target)
     if (toc_item.closest('li').hasClass('toc-active')) return
     $(window).off('scroll');
     removeTOCHighlight()
     addTOCHighlight(toc_item)
     var toc_anchor = $(`a[id*=${e.target.href.split("#")[1]}]`)[0]
     $(window).on('scroll', () => {
       if (toc_anchor.getBoundingClientRect().top > 0 && toc_anchor.getBoundingClientRect().top < 10) {
         $(window).off('scroll');
         $(window).on('scroll', handleScroll)
       }
     })
   })

   $(window).on('scroll', handleScroll)
 </script>

 <style>
   #toc ul {
     padding: 0.3rem 0;
     margin: 0;
   }

   #toc li {
     background: none;
     padding: 0.3rem 0;
     margin: 0;
     font-size: 0.9rem;
   }

   #toc>ul>li {
     font-weight: 500;
   }

   #toc>ul>li>ul>li {
     font-weight: 400;
   }

   #toc ul li ul {
     max-height: 0;
     overflow: hidden;
     transition: max-height 200ms ease-in-out;
   }

   #toc li {
     display: block;
   }

   .max-height-unset {
     max-height: 500px !important;
   }

   .toc-active {
     background-image: url("https://assets-global.website-files.com/629413da027523486a7eab2d/629583ec86070f0c22f2b517_mapiq-dot-point.svg") !important;
     background-position: 0 0.75rem !important;
     background-size: 8px 8px !important;
     background-repeat: no-repeat !important;
   }

   .toc-active>a {
     color: #0aaff0;
     padding-left: 1rem;
   }

   .toc-active>ul {
     max-height: 500px !important;
   }
 </style>

‍

Landing page / Thank you page

More info