CINXE.COM

Workcanvas | Online whiteboard for professionals

<!DOCTYPE html><!-- Last Published: Wed Apr 02 2025 11:52:58 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="www.workcanvas.com" data-wf-page="65d49cb7d9d1a16fa6955590" data-wf-site="61ee6efd2b720077360f518e"><head><meta charset="utf-8"/><title>Workcanvas | Online whiteboard for professionals</title><meta content="Workcanvas is the free online whiteboard tool that lets you brainstorm and collaborate with your team in real-time. Try it for free today!" name="description"/><meta content="Workcanvas | Online whiteboard for professionals" property="og:title"/><meta content="Workcanvas is the free online whiteboard tool that lets you brainstorm and collaborate with your team in real-time. Try it for free today!" property="og:description"/><meta content="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63284b978f3df54f9cd99f8e_social-image.jpg" property="og:image"/><meta content="Workcanvas | Online whiteboard for professionals" property="twitter:title"/><meta content="Workcanvas is the free online whiteboard tool that lets you brainstorm and collaborate with your team in real-time. Try it for free today!" property="twitter:description"/><meta content="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63284b978f3df54f9cd99f8e_social-image.jpg" property="twitter:image"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/css/monday-canvas.8e380289d.min.css" rel="stylesheet" type="text/css"/><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63f1ec0ba2038a831873a81f_Frame%201261156145.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63f1ec127a954cd08a92d1c3_Frame%201261156144.png" rel="apple-touch-icon"/><!-- CookieHub Production snippet--> <script src="https://cdn.cookiehub.eu/c2/a73e7c65.js"></script> <script type="text/javascript"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied', 'wait_for_update': 500}); document.addEventListener("DOMContentLoaded", function(event) { var cpm = {}; window.cookiehub.load(cpm); }); </script> <!-- Global site tag (gtag.js) - Google Ads: 10875682690 --> <script async src="https://www.googletagmanager.com/gtag/js?id=AW-10875682690"></script> <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0] , j = d.createElement(s) , dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); } )(window, document, 'script', 'dataLayer', 'GTM-5HQ974G'); </script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-10875682690'); </script> <script async src="https://www.googleoptimize.com/optimize.js?id=OPT-5HTXLVV"></script> <script> window.onload = function() { var myDate = new Date(); myDate.setMonth(myDate.getMonth() + 12); document.cookie = "source=" + document.referrer + ";expires=" + myDate + ";domain=.workcanvas.com;path=/"; var anchors = document.getElementsByTagName('*'); for (var i = 0; i < anchors.length; i++) { var anchor = anchors[i]; anchor.onclick = function() { code = this.getAttribute('whenClicked'); eval(code); } } } </script> <!-- Event snippet for Guest started conversion page In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. --> <script> function gtag_report_get_started_conversion(url) { var callback = function() { if (typeof (url) != 'undefined') { window.location = url; } }; gtag('event', 'conversion', { 'send_to': 'AW-10875682690/FZfkCNiMiLADEIL_9sEo', 'event_callback': callback }); return false; } </script> <!-- Event snippet for Guest started checkout conversion page In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. --> <script> function gtag_report_get_started_checkout_conversion(url) { var callback = function() { if (typeof (url) != 'undefined') { window.location = url; } }; gtag('event', 'conversion', { 'send_to': 'AW-10875682690/NaM_CJbC6LIDEIL_9sEo', 'event_callback': callback }); return false; } </script> <script type="text/javascript"> function set_canvas_cookie(cookieName, cookieValue) { var myDate = new Date(); myDate.setMonth(myDate.getMonth() + 12); document.cookie = cookieName + "=" + cookieValue + ";expires=" + myDate + ";domain=.workcanvas.com;path=/"; } function get_cookie(name) { const cookies = document.cookie.split(";"); if (!cookies || cookies.length === 0) { return null; } const regex = new RegExp(`(${name})=(.*)`); for (const cookie of cookies) { const match = cookie.match(regex); if (match) { return match[2]; } } return null; } </script> <script type="text/javascript"> function getMarketingParams() { if (typeof window === "undefined") return {}; const urlParams = new URLSearchParams(window.location.search); const utmParams = {}; urlParams.forEach((value, key) => { if (key.includes("utm_") || key.startsWith("marketing_") || key.startsWith("aw_key")) { utmParams[key] = value; } }); return utmParams; } function getMarketingProps() { const utmParams = getMarketingParams(); if (Object.keys(utmParams).length === 0) return null; Object.keys(utmParams).forEach((key) => { const newKey = `initial_${key}`; utmParams[newKey] = utmParams[key]; delete utmParams[key]; }); return utmParams; } function setLoggedInMixpanel() { const isLoggedIn = get_cookie("is_logged_in") || "false"; mixpanel.register({ "is_logged_in": isLoggedIn }); } function mixPanelTrack(event, props) { if(!mixpanel) return; mixpanel.track(event, props); } function setMarketingProps() { const marketingProps = getMarketingProps(); if (!marketingProps) return; posthog.register_once(marketingProps); posthog.people.set_once(marketingProps); mixpanel.register_once(marketingProps); mixpanel.people.set_once(marketingProps); } !function(t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function(i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function() { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } } (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function(t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e } , u.people.toString = function() { return u.toString(1) + ".people (stub)" } , o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "), n = 0; n < o.length; n++) g(u, o[n]); e._i.push([i, s, a]) } , e.__SV = 1) }(document, window.posthog || []); const MIXPANEL_CUSTOM_LIB_URL = "https://mixpanel.workcanvas.com/lib.min.js"; (function (f, b) { if (!b.__SV) { var e, g, i, h; window.mixpanel = b; b._i = []; b.init = function (e, f, c) { function g(a, d) { var b = d.split("."); 2 == b.length && ((a = a[b[0]]), (d = b[1])); a[d] = function () { a.push([d].concat(Array.prototype.slice.call(arguments, 0))); }; } var a = b; "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel"); a.people = a.people || []; a.toString = function (a) { var d = "mixpanel"; "mixpanel" !== c && (d += "." + c); a || (d += " (stub)"); return d; }; a.people.toString = function () { return a.toString(1) + ".people (stub)"; }; i = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split( " "); for (h = 0; h < i.length; h++) g(a, i[h]); var j = "set set_once union unset remove delete".split(" "); a.get_group = function () { function b(c) { d[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); a.push([e, call2]); }; } for ( var d = {}, e = ["get_group"].concat( Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++) b(j[c]); return d; }; b._i.push([e, f, c]); }; b.__SV = 1.2; e = f.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === f.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; g = f.getElementsByTagName("script")[0]; g.parentNode.insertBefore(e, g); } })(document, window.mixpanel || []); posthog.init('phc_7H06ROj6qJO4V14Hfs6xKkLUxofriHj8sovBV2IZ6ae', { api_host: 'https://eu.posthog.com' }); mixpanel.init('96933f79b08b7dbca8fab29df2b09d8b', { api_host: 'https://mixpanel.workcanvas.com', debug: true, loaded: function(loadedMixpanel) { const mixpanelDistinctId = loadedMixpanel?.get_distinct_id(); if(posthog?.alias && mixpanelDistinctId) { posthog.alias(mixpanelDistinctId); } }, }); setLoggedInMixpanel(); setMarketingProps(); if(typeof mixPanelTrack === 'function') { mixPanelTrack('site page view', { 'referrer': document?.referrer ?? undefined, }) } </script> <script type="text/javascript"> const HEADER_SOURCE = 'home-header'; function getTemplateIdByPathname() { if(window.location.pathname.includes('/lp/flowchart-template')) { return 'flowchart-process'; } if(window.location.pathname.includes('/lp/orgchart-software')) { return 'orgchart-2'; } if(window.location.pathname.includes('/lp/ganttchart')) { return 'GanttChart'; } return null; } function getCTASection() { const activeElement = document.activeElement; const heroSection = document.querySelector('.hero-section'); if (heroSection && heroSection.contains(activeElement)) { return 'first-fold'; } } function getCTAText() { try { const activeElement = document.activeElement; if(activeElement && activeElement?.tagName?.toLowerCase() === 'a') { return activeElement?.textContent; } } catch (error) { return null; } return null; } function getCTAFrom() { try { const activeElement = document.activeElement; if(!activeElement) return null; if(activeElement.classList.contains('nav-link')) { return 'header'; } if(activeElement.classList.contains('hero-button') || activeElement.classList.contains('template-button')) { return 'first-fold'; } if(activeElement.classList.contains('homepage-slider-button')) { return 'slider'; } if(activeElement.classList.contains('cta-button')) { return 'cta-section'; } return null; } catch (error) { return null; } } function isNewSignup() { const e = new Proxy(new URLSearchParams(window.location.search),{ get: (e,t)=>e.get(t) }); return "v2" === e.version } function signupURL() { return isNewSignup() ? `https://app.workcanvas.com/auth/signup?` : `https://app.workcanvas.com/auth/signup?version=v2` } function signupClicked(eventName, section) { const ctaText = getCTAText(); const ctaFrom = getCTAFrom(); if (typeof mixPanelTrack === "function") { mixPanelTrack("guest started", { source: eventName, cta_text: ctaText, cta_from: section || ctaFrom }); } gtag_report_get_started_conversion(); let signupUrl = signupURL(); const templateId = getTemplateIdByPathname(); if(eventName === HEADER_SOURCE && templateId) { signupUrl += `&templateId=${templateId}`; } window.open(signupUrl, "_self") } function getIsMondayEmailCampaign() { if (typeof window === "undefined") return {}; const urlParams = new URLSearchParams(window.location.search); return urlParams.get('utm_medium') === 'email' && urlParams.get('source') === 'braze' && urlParams.get('utm_campaign') === 'marketplace_whiteboard_users'; } function mondaySignupClicked(eventName, section) { const ctaText = getCTAText(); const ctaFrom = getCTAFrom(); const isMondayEmailCampaign = getIsMondayEmailCampaign(); if (typeof mixPanelTrack === "function") { mixPanelTrack("guest started", { source: eventName, cta_text: ctaText, cta_from: section || ctaFrom }); } gtag_report_get_started_conversion(); const signupUrl = isMondayEmailCampaign ? `https://app.workcanvas.com` : signupURL(); if(isMondayEmailCampaign) { set_canvas_cookie('canvas_board_template', 'monday-ob'); } window.open(signupUrl, "_self") } function loginClicked() { if(typeof mixPanelTrack === 'function') { mixPanelTrack('login', {'source': 'home-header', section: 'header'}); } window.open('https://app.workcanvas.com','_self'); } function templateClicked(templateId, templateSecondAlias, section) { const ctaText = getCTAText(); const ctaFrom = getCTAFrom(); if(typeof mixPanelTrack === "function") { if(templateSecondAlias) { mixPanelTrack("guest started", { source: templateSecondAlias, cta_text: ctaText, cta_from: section || ctaFrom }); } mixPanelTrack("guest started", { source: templateId, cta_text: ctaText, cta_from: section || ctaFrom }); } gtag_report_get_started_conversion(); const n = signupURL() + `&templateId=${templateId}`; window.open(n, "_self") } function trackEvent(eventName, section) { const ctaText = getCTAText(); const ctaFrom = getCTAFrom(); if(typeof mixPanelTrack === "function") { mixPanelTrack(eventName, { cta_text: ctaText, cta_from: section || ctaFrom }); } } function getRandomInt(max) { return Math.floor(Math.random() * max); } function multipleTemplatesClicked(e, t, section) { if (!e || !e.length) return; let randNum = getRandomInt(e.length); let randTemplate = e[randNum]; templateClicked(randTemplate,t, section); } </script><style> .active-item .homepage-slider-heading { font-weight: 700; } .active-item .activate-indicator-line { opacity: 1; } .active-item .homepage-slider-paragraph { display: block; } .active-item .homepage-slider-button { display: inline-block; } .homepage-slider .activate-indicator-line { transition: 200ms all; } @media screen and (min-width: 1279px) { .avatars-container { min-width: 960px; } } </style> <!-- Rotem changes --> <style> .homepage-working-section.workbetterandfaster { /* this class (feel free to rename) needs to be added to the section */ --workbetterandfasterBgColor: #ffb200; --workbetterandfasterTextColor: inherit; background-color: var(--workbetterandfasterBgColor); color: var(--workbetterandfasterTextColor); } .homepage-working-section.workbetterandfaster .homepage-working-tab-link:not(.w--current) { color: var(--workbetterandfasterTextColor); } </style> <!-- Custom colors for sliders --> <style> .slider-content > .single-item:nth-child(4) .activate-indicator-line, .slider-content > .single-item:nth-child(4) .button { background: #F5BE58; } .slider-content > .single-item:nth-child(4) .button:hover { background: #C78202; } .slider-content > .single-item:nth-child(1) .activate-indicator-line, .slider-content > .single-item:nth-child(1) .button { background: #0072FF; } .slider-content > .single-item:nth-child(1) .button:hover { background: #0050B3; } .slider-content > .single-item:nth-child(2) .activate-indicator-line, .slider-content > .single-item:nth-child(2) .button { background: #00B875; } .slider-content > .single-item:nth-child(2) .button:hover { background: #00754A; } .slider-content > .single-item:nth-child(3) .activate-indicator-line, .slider-content > .single-item:nth-child(3) .button { background: #F05C30; } .slider-content > .single-item:nth-child(3) .button:hover { background: #A5310E; } .slider-content > .single-item:nth-child(5) .activate-indicator-line, .slider-content > .single-item:nth-child(5) .button { background: #FFB4C9; } .slider-content > .single-item:nth-child(5) .button:hover { background: #E07895; } .slider-content > .single-item:nth-child(6) .activate-indicator-line, .slider-content > .single-item:nth-child(6) .button { background: #0072FF; } .slider-content > .single-item:nth-child(6) .button:hover { background: #0050B3; } .slider-content > .single-item:nth-child(7) .activate-indicator-line, .slider-content > .single-item:nth-child(7) .button { background: #00B875; } .slider-content > .single-item:nth-child(7) .button:hover { background: #00754A; } .slider-content > .single-item:nth-child(8) .activate-indicator-line, .slider-content > .single-item:nth-child(8) .button { background: #F05C30; } .slider-content > .single-item:nth-child(8) .button:hover { background: #A5310E; } </style> </head><body style="opacity:0" class="body-animation"><div data-w-id="b8b5f1a4-a287-45f4-da59-435e20c63a85" data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar hero-navbar w-nav"><div class="navbar-container"><div class="menu-brand-container"><a href="/" aria-current="page" class="brand w-nav-brand w--current"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/65a7b5af260ac460544567a0_logo.svg" loading="eager" width="190" height="Auto" alt="Workcanvas logo" whenClicked="trackEvent(&#x27;home_clicked&#x27;, &#x27;header&#x27;)" class="navbar-logo"/></a></div><nav role="navigation" class="navbar-items-menu w-nav-menu"><a href="/mondaydotcom" whenClicked="trackEvent(&#x27;sync_monday_clicked&#x27;, &#x27;header&#x27;)" class="nav-link-3 monday-nav-link w-nav-link">Sync聽聽聽聽聽聽聽monday.com</a><a href="/templates" whenClicked="trackEvent(&#x27;templates_clicked&#x27;, &#x27;header&#x27;)" class="nav-link w-nav-link">Templates</a><a href="/pricing" class="nav-link w-nav-link"><span whenClicked="trackEvent(&#x27;pricing_clicked&#x27;, &#x27;header&#x27;)">Pricing</span></a><a href="#" whenClicked="loginClicked()" class="nav-link w-nav-link">Login</a><a href="#" whenClicked="signupClicked(&#x27;home-header&#x27;, &#x27;header&#x27;)" class="nav-link primary-nav-link w-nav-link">Sign up</a></nav><div class="menu-button w-nav-button"><div class="w-icon-nav-menu"></div></div></div></div><div style="-webkit-transform:translate3d(0, -82px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -82px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -82px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -82px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar hero-navbar fixed-navbar w-nav"><div class="navbar-container"><div class="menu-brand-container"><a href="/" aria-current="page" class="brand w-nav-brand w--current"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/65a7b5af260ac460544567a0_logo.svg" loading="eager" width="190" height="Auto" alt="Workcanvas logo" whenClicked="trackEvent(&#x27;home_clicked&#x27;, &#x27;header&#x27;)" class="navbar-logo"/></a></div><nav role="navigation" class="navbar-items-menu w-nav-menu"><a href="/mondaydotcom" whenClicked="trackEvent(&#x27;sync_monday_clicked&#x27;, &#x27;header&#x27;)" class="nav-link-3 monday-nav-link w-nav-link">Sync聽聽聽聽聽聽聽monday.com</a><a href="/templates" whenClicked="trackEvent(&#x27;templates_clicked&#x27;, &#x27;header&#x27;)" class="nav-link w-nav-link">Templates</a><a href="/pricing" class="nav-link w-nav-link"><span whenClicked="trackEvent(&#x27;pricing_clicked&#x27;, &#x27;header&#x27;)">Pricing</span></a><a href="#" whenClicked="loginClicked()" class="nav-link w-nav-link">Login</a><a href="#" whenClicked="signupClicked(&#x27;home-header&#x27;, &#x27;header&#x27;)" class="nav-link primary-nav-link w-nav-link">Sign up</a></nav><div class="menu-button w-nav-button"><div class="w-icon-nav-menu"></div></div></div></div><section data-w-id="b2bcd7b0-d00d-15aa-8c60-9a073ddffe98" class="hero-section home-hero"><div class="trigger-navbar-animation"></div><div class="avatars-container"><div class="avatar top-left"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63207f738444b11ce0b7ecc5_yellow-arrow.svg" loading="lazy" alt="" class="top-left-arrow"/></div><div class="avatar bottom-left"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63207f7354955c847acb572d_blue-arrow.svg" loading="lazy" alt="" class="bottom-left-arrow"/></div><div class="avatar bottom-right"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63207f731cfec183f6b62f41_red-arrow.svg" loading="lazy" alt="" class="bottom-right-arrow"/></div><div class="avatar top-right"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63207f73a3bbee0f5075ab37_pink-arrow.svg" loading="lazy" alt="" class="top-right-arrow"/></div></div><div class="hero-graphic"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6351100dd726ad7cfb389793_left-graphic.webp" loading="lazy" sizes="(max-width: 888px) 100vw, 888px" srcset="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6351100dd726ad7cfb389793_left-graphic-p-500.webp 500w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6351100dd726ad7cfb389793_left-graphic.webp 888w" alt="" class="hero-graphic-img"/></div><div class="container hero-container"><div class="hero-text"><h1 class="hero-title">Online Whiteboard For Professionals</h1><div class="hero-description"><div class="lead hero-lead">Bring your team together to ideate, create and innovate on a digital whiteboard made for work.</div></div><a href="#" data-gtm-attribute="test" whenClicked="signupClicked(&#x27;home&#x27;, &#x27;first-fold&#x27;)" class="button hero-button w-button">Get started free</a></div><div class="hero-canvas"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6320a35b90e1b3554b8ec880_canvas-board-mobile.webp" loading="eager" style="opacity:0" data-w-id="82114f10-e5f9-2c40-230a-83f8e1aae3b1" alt="" class="hero-canvas-image mobile-canvas-image"/><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6320a2ffb5fa892b92a0c8da_canvas-board.webp" loading="eager" alt="" class="hero-canvas-image"/><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63189a7896f62882a496680f_digrams.svg" loading="lazy" alt="" class="hero-canvas-overlay animate-opacity"/><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63188ed34cbb158a9d833e16_board-controls.svg" loading="lazy" alt="" class="hero-canvas-overlay"/></div></div><div class="hero-graphic right-graphic"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/635110473b103a4bf9d74620_right-graphic.webp" loading="lazy" sizes="(max-width: 888px) 100vw, 888px" srcset="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/635110473b103a4bf9d74620_right-graphic-p-500.webp 500w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/635110473b103a4bf9d74620_right-graphic.webp 888w" alt="" class="hero-graphic-img"/></div></section><div class="section featured-section"><div class="container large-container"><div class="featured-home-features"><div data-w-id="fdf5d8cc-3325-b572-220e-c1d8da2b45f8" style="opacity:0" class="featured-home-feature-single"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63207d5dd430b8208544a82b_infinite.svg" loading="lazy" alt="" class="featured-home-feature"/><div><h3 class="heading-3">Infinite canvas</h3><p class="ultra-small-paragraph">Work without limits. Every Canvas is your small world, Unlimited in its size and structure. Navigate the canvas and see how intuitive and easy it feels.<br/></p></div></div><div data-w-id="2ab0560b-0d8d-5fad-59fe-106dd59e8fb5" style="opacity:0" class="featured-home-feature-single"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63207c49562cf736a5300755_fast.svg" loading="lazy" alt="" class="featured-home-feature"/><div><h3 class="heading-4">Blazing fast multiplayer</h3><p class="ultra-small-paragraph">Collaborate with your colleagues at the speed of light. Enjoy instant collaboration on every canvas, no matter where you are in the world. Powered by our world-class multiplayer engine.</p></div></div><div data-w-id="741e456a-be93-f7b2-ea69-6c1a7c33a987" style="opacity:0" class="featured-home-feature-single"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63207d5de7940b5e8cbbc5e8_easy.svg" loading="lazy" alt="" class="featured-home-feature"/><div><h3 class="heading-5">Easy to use</h3><p class="ultra-small-paragraph">Go from beginner to pro in no time. Work Canvas was purpose-built to deliver value from the first second you are using it. Intuitive but powerful UX together with our templates library will make it easy for anyone to start using it.</p></div></div><div data-w-id="49214703-4d90-7691-c1f2-5380f17b8caa" style="opacity:0" class="featured-home-feature-single"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/63207d5dc24257e90747b8fb_offline.svg" loading="lazy" alt="" class="featured-home-feature"/><div><h3 class="heading-5">Works offline <span class="coming-soon-label feature-label">Coming soon</span></h3><p class="ultra-small-paragraph">We do not care whether you have internet connection or not. You can work offline while other people are also working on your Canvas, and when you&#x27;ll go back online we will resolve all the conflicts and sync everyone automatically!</p></div></div></div></div></div><div class="section homepage-working-section workbetterandfaster"><div class="container"><div class="homepage-working-content"><h1 data-w-id="fb370148-0411-54cd-6028-090bc030ada6" style="opacity:0">Work better and faster</h1><div data-current="Easy sharing" data-easing="ease" data-duration-in="0" data-duration-out="0" class="homepage-working-tabs w-tabs"><div data-w-id="11da498f-e49b-499a-9f2a-510c7454ee65" style="opacity:0" class="homepage-main-slider-tab-menu w-tab-menu"><a id="0" data-w-tab="Easy sharing" class="homepage-working-tab-link w-inline-block w-tab-link w--current"><div>Easy聽sharing</div></a><a id="1" data-w-tab="Templates" class="homepage-working-tab-link w-inline-block w-tab-link"><div>Templates</div></a><a id="4" data-w-tab="Presentations" class="homepage-working-tab-link w-inline-block w-tab-link"><div>Presentations</div></a><a id="3" data-w-tab="Video &amp; Audio" class="homepage-working-tab-link w-inline-block w-tab-link"><div>Video聽&amp;聽Audio</div></a></div><div data-w-id="11da498f-e49b-499a-9f2a-510c7454ee75" style="opacity:0" class="tab-content w-tab-content"><div data-w-tab="Easy sharing" class="w-tab-pane w--tab-active"><div><p class="work-better-text">Easily Create, share and discuss ideas with your team. Perfect for brainstorming and getting started on a project in minutes. Get everyone together on the same page and start creating.</p><div class="homepage-slider-image-container"><a href="#" class="homepage-slider-link w-inline-block"><div whenClicked="signupClicked(&#x27;home-feature-preview&#x27;, &#x27;work-better-component&#x27;)" class="button homepage-slider-image-button">Get Started Free</div></a><img sizes="(max-width: 1357px) 100vw, 1357px" srcset="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a572ddd87d1b76aa9503_easy-sharing-p-500.webp 500w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a572ddd87d1b76aa9503_easy-sharing-p-800.webp 800w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a572ddd87d1b76aa9503_easy-sharing-p-1080.webp 1080w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a572ddd87d1b76aa9503_easy-sharing.webp 1357w" src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a572ddd87d1b76aa9503_easy-sharing.webp" loading="eager" alt=""/></div></div></div><div data-w-tab="Templates" class="w-tab-pane"><div><p class="work-better-text">Our templates are built to be simple and fast. They let you get to work quickly, so you have more time to focus on what matters. With one click, you can pick your template for any scenario.</p><div class="homepage-slider-image-container"><a href="#" class="homepage-slider-link w-inline-block"><div whenClicked="signupClicked(&#x27;home-feature-preview&#x27;)" class="button homepage-slider-image-button">Get Started Free</div></a><img sizes="100vw" srcset="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a571df3949badf73d2ac_templates-p-500.webp 500w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a571df3949badf73d2ac_templates-p-800.webp 800w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a571df3949badf73d2ac_templates-p-1080.webp 1080w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a571df3949badf73d2ac_templates.webp 1357w" src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a571df3949badf73d2ac_templates.webp" loading="eager" alt=""/></div></div></div><div data-w-tab="Presentations" class="w-tab-pane"><div><p class="work-better-text">Create presentations out of your ideas and diagrams, turn sketches, flowcharts, photos and documents into beautiful slideshows to communicate them to others in a beautiful and clear way.</p><div class="homepage-slider-image-container"><a href="#" class="homepage-slider-link w-inline-block"><div whenClicked="signupClicked(&#x27;home-feature-preview&#x27;)" class="button homepage-slider-image-button">Get Started Free</div></a><img sizes="100vw" srcset="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a59d2930be95fb90372c_presentations-p-500.webp 500w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a59d2930be95fb90372c_presentations-p-800.webp 800w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a59d2930be95fb90372c_presentations-p-1080.webp 1080w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a59d2930be95fb90372c_presentations.webp 1357w" src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a59d2930be95fb90372c_presentations.webp" loading="eager" alt=""/></div></div></div><div data-w-tab="Video &amp; Audio" class="w-tab-pane"><div><p class="work-better-text">Turn any conversation into a collaborative experience. Our video and audio tools make it easy to work together, discuss concept ideas in real time, and collaborate from wherever you are.</p><div class="homepage-slider-image-container"><a href="#" class="homepage-slider-link w-inline-block"><div whenClicked="signupClicked(&#x27;home-feature-preview&#x27;)" class="button homepage-slider-image-button">Get Started Free</div></a><img sizes="100vw" srcset="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a5716667e785a2405f5b_video-audio-p-500.webp 500w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a5716667e785a2405f5b_video-audio-p-800.webp 800w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a5716667e785a2405f5b_video-audio-p-1080.webp 1080w, https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a5716667e785a2405f5b_video-audio.webp 1357w" src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/6321a5716667e785a2405f5b_video-audio.webp" loading="eager" alt=""/></div></div></div></div></div></div></div></div><div class="homepage-features"><div class="section first-slider-section"><div class="container large-container"><div class="homepage-features-slider-container"><div class="homepage-slider homepage-features-content"><h2>Work templates</h2><div class="slider-content accordion-findyourflow"><div data-w-id="83c6edae-3255-2dda-6b8e-39a82734a529" style="opacity:0" class="single-item active-item"><div class="homepage-slider-heading">Brainstorm &amp; Collaboration</div><p class="homepage-slider-paragraph">Create a space for teams to discover and transform their best ideas into actions collaboratively.</p><a whenClicked="signupClicked(&#x27;home-templates-preview&#x27;, &#x27;templates-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="83c6edae-3255-2dda-6b8e-39a82734a531" style="opacity:0" class="single-item"><div class="homepage-slider-heading">Presentations</div><p class="homepage-slider-paragraph">Showcase your work, create a slideshow and share ideas with your team with beautiful presentations.</p><a whenClicked="signupClicked(&#x27;home-templates-preview&#x27;, &#x27;templates-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="83c6edae-3255-2dda-6b8e-39a82734a535" style="opacity:0" class="single-item"><div class="homepage-slider-heading">Agile Workflows</div><p class="homepage-slider-paragraph">Optimize processes and improve your team鈥檚 efficiency, organize and track progress.</p><a whenClicked="signupClicked(&#x27;home-templates-preview&#x27;, &#x27;templates-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="83c6edae-3255-2dda-6b8e-39a82734a539" style="opacity:0" class="single-item"><div class="homepage-slider-heading">Project Management</div><p class="homepage-slider-paragraph">Make smart product decisions, align your team, and tell a compelling product story.</p><a whenClicked="signupClicked(&#x27;home-templates-preview&#x27;, &#x27;templates-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="83c6edae-3255-2dda-6b8e-39a82734a53d" style="opacity:0" class="single-item"><div class="homepage-slider-heading">Workshops</div><p class="homepage-slider-paragraph">Lead effective workshops, efficient and inclusive so anyone can become an active participant.</p><a whenClicked="signupClicked(&#x27;home-templates-preview&#x27;, &#x27;templates-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="83c6edae-3255-2dda-6b8e-39a82734a541" style="opacity:0" class="single-item"><div class="homepage-slider-heading">Knowledge Management</div><p class="homepage-slider-paragraph">Analyze benefits and pain points, target the right audiences and design better customer experiences.</p><a whenClicked="signupClicked(&#x27;home-templates-preview&#x27;, &#x27;templates-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div></div></div><div data-delay="4000" data-animation="slide" class="homepage-slider first-slider w-slider" data-autoplay="false" data-easing="ease" data-hide-arrows="false" data-disable-swipe="true" data-autoplay-limit="0" data-nav-spacing="3" data-duration="500" data-infinite="true"><div class="w-slider-mask"><div class="w-slide"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade189f31f10c58cefe28_brainstorm.webp" alt="" class="homepage-slider-asset"/></div></div><div class="hide-arrows w-slider-arrow-left"><div class="w-icon-slider-left"></div></div><div class="hide-arrows w-slider-arrow-right"><div class="w-icon-slider-right"></div></div><div class="hide-arrows w-slider-nav w-round"></div></div></div></div></div><div class="section"><div class="container large-container"><div class="homepage-features-slider-container second-slider"><div data-delay="4000" data-animation="slide" class="homepage-slider second-slider w-slider" data-autoplay="false" data-easing="ease" data-hide-arrows="false" data-disable-swipe="true" data-autoplay-limit="0" data-nav-spacing="3" data-duration="500" data-infinite="true"><div class="w-slider-mask"><div class="w-slide"><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade182bd81c924a694553_support.webp" alt="" class="homepage-slider-asset"/></div></div><div class="hide-arrows w-slider-arrow-left"><div class="w-icon-slider-left"></div></div><div class="hide-arrows w-slider-arrow-right"><div class="w-icon-slider-right"></div></div><div class="hide-arrows w-slider-nav w-round"></div></div><div class="homepage-slider homepage-features-content second-content"><h2>Works for everyone</h2><div class="slider-content accordion-collaboration"><div data-w-id="2c5de95e-d5ed-dc86-e4fa-6f339635dd8f" style="opacity:0" class="single-item active-item"><div class="homepage-slider-heading">Support</div><p class="homepage-slider-paragraph">Map out and route incoming support tickets to the right person in your organization.</p><a whenClicked="signupClicked(&#x27;home-use-cases&#x27;, &#x27;industry-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="2c5de95e-d5ed-dc86-e4fa-6f339635dd97" style="opacity:0" class="single-item"><div class="homepage-slider-heading">HR</div><p class="homepage-slider-paragraph">Showcase team structure, roles, and responsibilities. Outline management routes and processes.</p><a whenClicked="signupClicked(&#x27;home-use-cases&#x27;, &#x27;industry-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="2c5de95e-d5ed-dc86-e4fa-6f339635dd9f" style="opacity:0" class="single-item"><div class="homepage-slider-heading">R&amp;D</div><p class="homepage-slider-paragraph">Display and sync on tasks, organize and track your team鈥檚 progress through the steps of the project.</p><a whenClicked="signupClicked(&#x27;home-use-cases&#x27;, &#x27;industry-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="2c5de95e-d5ed-dc86-e4fa-6f339635dda7" style="opacity:0" class="single-item"><div class="homepage-slider-heading">Sales</div><p class="homepage-slider-paragraph">Plan and assess projects, engage stakeholders, monitor deliverables, and evaluate project success.</p><a whenClicked="signupClicked(&#x27;home-use-cases&#x27;, &#x27;industry-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="2c5de95e-d5ed-dc86-e4fa-6f339635ddad" style="opacity:0" class="single-item"><div class="homepage-slider-heading">Product</div><p class="homepage-slider-paragraph">Create a space for teams to discover and transform their best ideas into actions collaboratively.</p><a whenClicked="signupClicked(&#x27;home-use-cases&#x27;, &#x27;industry-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="2c5de95e-d5ed-dc86-e4fa-6f339635ddb5" style="opacity:0" class="single-item"><div class="homepage-slider-heading">Customer Success</div><p class="homepage-slider-paragraph">Track which processes are working effectively, and identify problems or gaps in current processes.</p><a whenClicked="signupClicked(&#x27;home-use-cases&#x27;, &#x27;industry-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="73899b29-71e6-7d38-cf2b-dad9b928f640" style="opacity:0" class="single-item"><div class="homepage-slider-heading">IT</div><p class="homepage-slider-paragraph">Manage issues, add tags to track bugs, and collaborate on your queue with your team.</p><a whenClicked="signupClicked(&#x27;home-use-cases&#x27;, &#x27;industry-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div><div data-w-id="0dcaf46c-245a-625e-13ae-a6b3417f5c23" style="opacity:0" class="single-item"><div class="homepage-slider-heading">Consultants</div><p class="homepage-slider-paragraph">Highlight the problems your team is facing, analyze and document your team鈥檚 processes and outcomes.</p><a whenClicked="signupClicked(&#x27;home-use-cases&#x27;, &#x27;industry-component&#x27;)" href="#" class="button homepage-slider-button w-button">Get Started</a><div class="activate-indicator-line"></div></div></div></div></div></div></div></div><div class="section cta-section"><div class="container"><div data-w-id="501a502f-4128-325c-5a62-78b081512f2f" style="opacity:0" class="cta-title">Make work easy.</div><a href="#" whenClicked="signupClicked(&#x27;home-footer&#x27;, &#x27;banner-component&#x27;)" data-w-id="8455c365-c56e-5b4e-9981-b582057d59bf" style="opacity:0" class="button cta-button w-button">Get started free</a></div></div><div WhenClicked="" class="footer-legal"><div><img src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/61fa868731cd1a1e686f66b5_Group%201261156428.svg" loading="lazy" alt="" class="by-monday"/><a href="https://monday.com/l/legal/tos/" target="_blank" class="legal-link">Terms of service</a><a href="https://monday.com/l/privacy/privacy-policy/" target="_blank" class="legal-link">Privacy policy</a><a whenClicked="window.cookiehub.openPersonalData();" href="#" class="legal-link">Your privacy choices</a><a href="/subsidiaries-and-sub-processors" target="_blank" class="legal-link">Subsidiaries and Sub-Processors</a></div></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=61ee6efd2b720077360f518e" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/js/monday-canvas.schunk.4a394eb5af8156f2.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/js/monday-canvas.schunk.3bf3c06809a02500.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/js/monday-canvas.schunk.276fdf7a652b6f04.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/js/monday-canvas.schunk.58f0227c9ed3a126.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/js/monday-canvas.schunk.a2b3c6f017aef1ab.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/js/monday-canvas.schunk.58d78bb00505e8dd.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/js/monday-canvas.5b20c492.4ecc55b441096625.js" type="text/javascript"></script><script> // # Important! // ########### // Please changes images to the real images link/url -> const findyourflowImages = [ "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade189f31f10c58cefe28_brainstorm.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632096c82eb0940132c54eb4_presentations-1.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade187380e2033fbb8a30_agile-workflows.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade188423e23e723c2419_project-management.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade1876aa5368ee69d3f2_workshops.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade186bfe117d149b8916_knowledge-management.webp", ]; const collaborationImages = [ "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade182bd81c924a694553_support.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade186dc72dbfb70f4f40_hr.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade18a2e839941771bb91_r%26d.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade18ffa812f65fa9cf17_sales.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade194e1f465d7080fb6f_product.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade18c29c54755a351821_customer-success.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade188dc5516d3e596ed2_it.webp", "https://cdn.prod.website-files.com/61ee6efd2b720077360f518e/632ade18a2e839576371bb90_consultants.webp", ]; // Change the colors for each tab here, add if new tabs area added. const tabProperties = Object.freeze({ easy_sharing: { backgroundColor: "#FFB200", color: "inherit", }, templates: { backgroundColor: "#0074FF", color: "#fff", }, video_and_audio: { backgroundColor: "#00BB6F", color: "#fff", }, presentations: { backgroundColor: "#FFB0C9", color: "inherit", }, //comments: { // backgroundColor: "#00BB6F", // color: "#fff", // }, }); //is element in viewport function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth); } const handleTabStyleChange = () => { let idx = 1; let tabsInterval; const tabsElements = document.querySelectorAll(".homepage-working-tab-link"); const tabsLabels = []; tabsElements.forEach((tab) => { tabsLabels.push(tab.innerText); }); const sectionElement = document.querySelector(".homepage-working-section.workbetterandfaster"); const sectionElementStyle = getComputedStyle(sectionElement); const startInterval = () => { tabsInterval = setInterval(() => { if (idx === tabsElements.length) { idx = 0; } tabsElements[idx].click(); idx++; }, 4000); }; tabsElements.forEach((item) => item.addEventListener("click", (event) => { const fullTabKey = event.target.innerText; const selectedIndex = tabsLabels.indexOf(fullTabKey); const tabKey = fullTabKey .toLowerCase() .replace("&", "and") .replace(/[^a-z0-9]/g, "_"); const { color, backgroundColor } = tabProperties[tabKey]; sectionElement.style.setProperty("--workbetterandfasterBgColor", backgroundColor); sectionElement.style.setProperty("--workbetterandfasterTextColor", color); idx = selectedIndex; }) ); document.addEventListener("scroll", () => { const tabsContainer = document.querySelector(".workbetterandfaster .homepage-main-slider-tab-menu"); const boundingRect = tabsContainer.getBoundingClientRect(); if ( boundingRect.top >= 0 && boundingRect.left >= 0 && boundingRect.right <= (window.innerWidth || document.documentElement.clientWidth) && boundingRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) ) { if (!tabsInterval) startInterval(); } else { if (tabsInterval) { clearInterval(tabsInterval); tabsInterval = null; } } }); }; // Accordions: // TODO: give the accordion sections the matching class from the array (I went by title but feel free to change). const sliderSections = ["findyourflow", "collaboration"]; const changeCurrentElementImage = (sliderClassName, idx) => { let imageArray; if (sliderClassName === ".accordion-findyourflow") { imageArray = findyourflowImages; } else if (sliderClassName === ".accordion-collaboration") { imageArray = collaborationImages; } const sliderContainer = document.querySelector(`${sliderClassName}`).closest(".homepage-features-slider-container"); const sliderImg = sliderContainer.querySelector(".w-slider-mask > .w-slide > img"); const currentImgElement = document.querySelector(`${sliderClassName} .w-slider-mask > .w-slide > img`); sliderImg.setAttribute("src", imageArray[idx]); }; const goToNextSlide = (accordionFullClassName) => { const currentElement = document.querySelector(`${accordionFullClassName} .active-item`); if (idx === accordionElements.length) { idx = 0; } const nextElement = accordionElements[idx]; currentElement.classList.remove("active-item"); nextElement.classList.add("active-item"); idx++; }; const startAccordionAnimation = (accordionClassName) => { let idx = 0; const activeClass = "active-item"; const accordionFullClassName = `.accordion-${accordionClassName}`; const accordionElements = document.querySelectorAll(`${accordionFullClassName} .single-item`); // add click event on accordionElements accordionElements.forEach((item) => item.addEventListener("click", (event) => { const currentElement = document.querySelector(`${accordionFullClassName} .active-item`); const nextElement = event.target.closest(".single-item"); currentElement.classList.remove(activeClass); nextElement.classList.add(activeClass); const idx = Array.from(accordionElements).indexOf(nextElement); changeCurrentElementImage(accordionFullClassName, idx); clearInterval(sliderInterval); }) ); // const sliderInterval = setInterval(() => { // const currentElement = document.querySelector( // `${accordionFullClassName} .${activeClass}` // ); // if (idx === accordionElements.length) { // idx = 0; // } // const nextElement = accordionElements[idx]; // currentElement.classList.remove(activeClass); // nextElement.classList.add(activeClass); // changeCurrentElementImage(accordionFullClassName, idx); // idx++; // }, 4000); }; const startAnimations = () => { handleTabStyleChange(); // go over the slider array, and start a separate animation for each sliderSections.map((sliderClassName) => startAccordionAnimation(sliderClassName)); }; startAnimations(); </script> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HQ974G" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> </body></html>

Pages: 1 2 3 4 5 6 7 8 9 10