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