How to videos
Edit nav/menu
Edit CTA Symbol
Nav - white over navy interaction
Meta titles + descriptions
TEMPORARY WELLBINEG ON CATEGORY TEMPLATE
Create Blog Category
Website Banner
Technical Documentation
Autofill form setup
--- 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)
Oops, it was this page >> https://www.finsweet.com/attributes/cms-load
Table of Contents
<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
https://www.finsweet.com/attributes/cms-filter
Deep Dives (CMS Template)
<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>