Scrollytelling

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="description" content="Easily create immersive scrollytelling stories with Flourish, the ultimate tool for data visualization and storytelling.">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@f_l_o_u_r_i_s_h"> <meta name="twitter:image" content="https://flourish.studio/images/examples/scrollytelling-meta-tag.png"> <meta name="twitter:title" content="Scrollytelling"> <meta name="twitter:description" content="Easily create immersive scrollytelling stories with Flourish, the ultimate tool for data visualization and storytelling."> <meta name="twitter:creator" content="@f_l_o_u_r_i_s_h"> <meta property="og:title" content="Scrollytelling"> <meta property="og:image" content="https://flourish.studio/images/examples/scrollytelling-meta-tag.png"> <meta property="og:type" content="website"> <meta property="og:description" content="Easily create immersive scrollytelling stories with Flourish, the ultimate tool for data visualization and storytelling."> <meta property="og:site_name" content="Flourish"> <meta property="fb:app_id" content="102649676918117"> <title>Scrollytelling</title> <script src="https://cdn-au.onetrust.com/consent/c7f22011-a5da-4a30-8750-4cb18703c00d/OtAutoBlock.js" type="text/javascript"></script> <script src="https://cdn-au.onetrust.com/consent/c7f22011-a5da-4a30-8750-4cb18703c00d/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="c7f22011-a5da-4a30-8750-4cb18703c00d" ></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-44635456-19', 'auto'); ga('send', 'pageview'); function createFunctionWithTimeout(callback, timeout) { var called = false; function fn() { if (!called) { called = true; callback(); } } setTimeout(fn, timeout || 1000); // default is 1000ms return fn; } var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitCallback': createFunctionWithTimeout(function() { document.location = url; }) }); }; var trackEmailClick = function(address_type) { ga('send', 'event', { eventCategory: 'click', eventAction: 'email', eventLabel: address_type }); }; var trackFormSubmit = function(label, method, path, params) { ga('send', 'event', { eventCategory: 'outbound', eventAction: 'click', eventLabel: label, hitCallback: createFunctionWithTimeout(function() { params = params || {}; var form = document.createElement('form'); form.setAttribute('method', method); form.setAttribute('action', path); for (var key in params) { if (params.hasOwnProperty(key)) { var hiddenField = document.createElement('input'); hiddenField.setAttribute('type', 'hidden'); hiddenField.setAttribute('name', key); hiddenField.setAttribute('value', params[key]); form.appendChild(hiddenField); } } document.body.appendChild(form); form.submit(); }) }); }; </script> <script src="https://www.googleoptimize.com/optimize.js?id=OPT-MLMV2BQ"></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-PBJJP4J');</script> <script type="text/javascript"> (function () { const LOG_STYLES = { title: "color: #2563eb; font-weight: bold; font-size: 12px;", success: "color: #059669; font-weight: bold;", error: "color: #dc2626; font-weight: bold;", info: "color: #737373; font-size: 11px;" }; function logEvent(event_type, properties, context = []) { if (!false) return; console.group( `%c[SnowplowAnalytics]: ${event_type} (${new Date().toUTCString()})`, LOG_STYLES.title ); const tableData = [ ...Object.entries(properties).map(([key, value]) => ({ key, value, source: "event" })), ...context.flatMap(ctx => Object.entries(ctx.data).map(([key, value]) => ({ key, value, source: `context: ${ctx.schema}` })) ) ].reduce((acc, {key, value, source}) => { acc[key] = {value, source}; return acc; }, {}); console.table(tableData, ["value", "source"]); console.groupEnd(); } function initializeSnowplow() { try { // https://docs.snowplow.io/docs/sources/trackers/javascript-trackers/web-tracker/quick-start-guide/ // sp.js is called 9e10734c6f18ce57.js ;(function (p, l, o, w, i, n, g) { if (!p[i]) { p.GlobalSnowplowNamespace = p.GlobalSnowplowNamespace || []; p.GlobalSnowplowNamespace.push(i); p[i] = function () { (p[i].q = p[i].q || []).push(arguments) }; p[i].q = p[i].q || []; n = l.createElement(o); g = l.getElementsByTagName(o)[0]; n.async = 1; n.src = w; g.parentNode.insertBefore(n, g) } }(window, document, "script", "/js/9e10734c6f18ce57.js", "snowplow")); window.snowplow('newTracker', 'sp1', 'https://api.canva.com/_spi/ae/snowplow/5f60f4dc-c844-41b5-9da7-ab8d39e5f475', { appId: 'flourish', platform: 'web', cookieDomain: 'flourish.studio', contexts: { webPage: true, session: true, browser: true, }, stateStorageStrategy: 'cookieAndLocalStorage', referrerPolicy: 'no-referrer-when-downgrade', credentials: 'omit', eventMethod: 'post' }); window.snowplow('addPlugin', "https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-client-hints@latest/dist/index.umd.min.js", ["snowplowClientHints", "ClientHintsPlugin"] ); window.snowplow('addPlugin', "https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-ga-cookies@latest/dist/index.umd.min.js", ["snowplowGaCookies", "GaCookiesPlugin"], [{ ga4: true, ua: false, ga4MeasurementId: "G-KW52XHYN9H" }] ); window.sp = { trackInteraction: function (properties) { window.snowplow('trackSelfDescribingEvent', { event: { schema: 'iglu:studio.flourish/flourish_interacted/jsonschema/1-0-0', data: properties } }); logEvent('flourish_interacted', properties); }, trackFormInteraction: function (properties) { window.snowplow('trackSelfDescribingEvent', { event: { schema: 'iglu:studio.flourish/flourish_form_interacted/jsonschema/1-0-0', data: properties } }); logEvent('flourish_form_interacted', properties); }, }; // GA Duplicate Events (function () { const trackGAEvent = function (properties) { const eventData = { category: "ga4_event", action: properties.action || properties.event || 'unknown' }; window.snowplow('trackSelfDescribingEvent', { event: { schema: 'iglu:com.snowplowanalytics.snowplow/unstruct_event/jsonschema/1-0-0', data: { schema: 'iglu:com.google.analytics.measurement-protocol/event/jsonschema/1-0-0', data: eventData } }, context: [{ schema: 'iglu:com.google.analytics.measurement-protocol/hit/jsonschema/1-0-0', data: {type: "event"} }] }); logEvent('ga_duplicator', eventData); }; if (window.dataLayer && Array.isArray(window.dataLayer)) { const originalDataLayerPush = Array.prototype.push; window.dataLayer.push = function (...args) { args.forEach(arg => { if (Array.isArray(arg) && arg[0] === "event") { const [_, eventName, eventParams] = arg; trackGAEvent({ ...eventParams, category: "ga4_event", action: eventName, }); } else if (typeof arg === "object" && arg !== null && "event" in arg) { const {event, ...params} = arg; trackGAEvent({ ...params, category: "ga4_event", action: event, }); } }); return originalDataLayerPush.apply(window.dataLayer, args); }; } const original_gtag = window.gtag; window.gtag = (...args) => { if (original_gtag) { original_gtag.apply(window, args); } const [command, action, parameters] = args; if (command === "set" || command === "consent") { return; } if (command === "event") { trackGAEvent({ ...parameters, category: "ga4_event", action, }); } }; })(); let pageLoadTime = Date.now(); let pageScrollDepth = 0; let scrollTimeout; let isUnloading = false; function trackClosed(action) { const properties = { seconds_on_page: Math.round((Date.now() - pageLoadTime) / 1000).toString(), page_scroll_depth: pageScrollDepth.toString(), action: action }; window.snowplow('trackSelfDescribingEvent', { event: { schema: 'iglu:studio.flourish/flourish_closed/jsonschema/1-0-0', data: properties } }); logEvent('flourish_closed', properties); } function updateScrollDepth() { const html = document.documentElement; const currentScrollDepth = Math.round( (html.scrollTop / (html.scrollHeight - html.clientHeight)) * 100 ); pageScrollDepth = Math.max(pageScrollDepth, currentScrollDepth); } window.addEventListener("scroll", () => { clearTimeout(scrollTimeout); scrollTimeout = setTimeout(updateScrollDepth, 100); }); window.addEventListener("beforeunload", () => { isUnloading = true; trackClosed("window_close"); }); document.addEventListener("visibilitychange", () => { if (document.visibilityState === "hidden" && !isUnloading) { trackClosed("tab_hidden"); } else if (document.visibilityState === "visible") { isUnloading = false; pageLoadTime = Date.now(); window.snowplow('trackPageView'); logEvent('page_view', {url: window.location.pathname}); } }); window.snowplow('trackPageView'); logEvent('page_view', {url: window.location.pathname}); } catch (error) { console.error('%c[SnowplowAnalytics] Error:', LOG_STYLES.error, error); } } window.OptanonWrapper = function () { if (!window.Optanon?.IsAlertBoxClosedAndValid()) return; if (window.OnetrustActiveGroups?.includes('C0002')) { initializeSnowplow(); } }; if (window.OnetrustActiveGroups?.includes('C0002')) { initializeSnowplow(); } })(); </script>  <script src="/js/d3-dispatch.js"></script> <script src="/js/d3-interpolate.js"></script> <script src="/js/d3-selection.js"></script> <script src="/js/d3-timer.js"></script> <script src="/js/d3-transition.js"></script> <link rel="alternate" href="/atom.xml" title="Flourish" type="application/atom+xml"> <link href="/highlight.css?3e9f1d3cf8a99ebe7f3f230bae0e7d41" rel="stylesheet"> <link href="/style.css?20112024" rel="stylesheet"> <meta name="generator" content="Hexo 6.2.0"></head> <body onclick class="is-static"> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PBJJP4J" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <script> /** * Safely get the nearest element matching a selector */ const findClosestElement = (element, selector) => { if (!element || !element.closest) { return null; } try { return element.closest(selector); } catch (error) { console.warn('Error finding closest element:', error); return null; } } /** * Get data from the closest parent with specified attribute */ const getInheritedData = (element, attribute) => { try { const dataAttr = `data-${attribute}`; let current = element; while (current && current.nodeType === Node.ELEMENT_NODE) { if (current.hasAttribute(dataAttr)) { return current.getAttribute(dataAttr); } current = current.parentElement; } return null; } catch (error) { console.warn('Failed to get inherited data:', error); return null; } } /** * Initialize auto-tracking */ const initAutoTracking = () => { try { // Track clicks document.addEventListener('click', (e) => { if (!e?.target instanceof Element) return; const element = findClosestElement(e.target, '[data-track]'); if (!element) return; const trackType = element.dataset.track; if (trackType === 'true') { FlourishAnalytics.track(element); } else { FlourishAnalytics.track(element, { section_group: trackType }); } }); } catch (error) { console.warn('Failed to initialize auto-tracking:', error); } }; const initializeTracking = () => { initAutoTracking(); }; /** * Get all tracking data for an element */ const getTrackingData = (element) => { try { // Ensure we're working with a DOM element if (!(element instanceof Element)) { console.warn('Invalid element provided to getTrackingData'); return {}; } // Derive component name let component = element.dataset.component; if (!component) { if (element.tagName === 'A' && element.href) { // For links, use the last URL segment const path = element.getAttribute('href').replace(/\/$/, ''); const lastPart = path.split('/').pop(); component = lastPart || 'page'; } else if (element.tagName === 'BUTTON') { // For buttons, use text content or fallback const text = element.textContent?.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_'); component = text || 'button'; } else { // Fallback for other elements component = element.id || 'interaction'; } } // Find closest container with section info let section = element.dataset.section; if (!section) { // Look for standard section containers const sectionContainer = element.closest('[class*="section"],[class*="container"],[id*="section"],[id*="container"]'); if (sectionContainer) { section = sectionContainer.id || sectionContainer.className.split(' ')[0] || 'main'; } else { section = 'main'; } } return { section: section, section_id: element.dataset.sectionId || getInheritedData(element, 'section-id'), section_group: element.dataset.sectionGroup || getInheritedData(element, 'section-group'), component: component, component_id: element.dataset.componentId || getInheritedData(element, 'component-id') }; } catch (error) { console.warn('Failed to get tracking data:', error); return {}; } } window.FlourishAnalytics = { // Track an interaction track: function (element, overrides = {}) { try { if (!window?.sp?.trackInteraction) { console.warn('Analytics tracking is not available'); return; } // Ensure we have a valid element if (!(element instanceof Element)) { console.warn('Invalid element provided to track'); return; } const params = { ...getTrackingData(element), interaction_type: overrides.interaction_type || 'click', ...overrides }; if (params.section && params.component) { window.sp.trackInteraction(params); } else { console.warn('Missing required tracking fields:', { section: params.section, component: params.component }); } } catch (error) { console.warn('Failed to track interaction:', error); } }, // For general clicks/interactions trackClick: function (element, options = {}) { this.track(element, { interaction_type: 'click', ...options }); }, // For form interactions trackForm: function (form, action = 'submit', options = {}) { if (!(form instanceof Element)) return; const formData = { form_id: form.id || undefined, form_name: form.getAttribute('name') || undefined, form_action: action, ...options }; window.sp.trackFormInteraction(formData); }, }; // Initialize auto-tracking initializeTracking(); </script>  <div class="row header not-logged-in" data-section="header"> <div class="row-inner">  <a href="/" class="logo clickable menu-item" data-track="click" data-component="logo"> <img id="logo" src="/images/Flourish_Logo_Black_small.png" alt="Flourish logo"> </a> <div class="menu-holder"> <h2 class="hamburger menu-item mobile-nav" tabindex="0"><i class="fa fa-bars"></i><i class="fa fa-close"></i></h2> <div class="menu desktop-nav"> <div class="dropdown-menu sub-menu" id="main-menu"> <div class="dropdown-menu-item-wrapper"> <a class="dropdown-menu-item" href="/examples" data-track="click" data-component="examples"> <h1 class="menu-item">Examples</h1> </a> </div> <div class="dropdown-menu-item-wrapper"> <div class="dropdown-menu-item has-dropdown" data-track="click" data-component="solutions" tabindex="0" aria-haspopup="true" href="/solutions"><h1 data-section="solutions" class="menu-item">Solutions</h1></div> <div class="dropdown-menu-contents"> <div class="dropdown-menu-section" data-section-group="solutions"> <div class="menu-section-header"><strong>Industry</strong></div> <a href="/solutions/financial-services" data-track="click" data-component="financial">Financial Services</a> <a href="/solutions/professional-services" data-track="click" data-component="professional">Professional Services</a> <a href="/solutions/newsrooms" data-track="click" data-component="newsrooms">Newsrooms</a> <a href="/solutions/marketing" data-track="click" data-component="marketing">Marketing</a> <a href="/solutions/not-for-profit" data-track="click" data-component="nonprofit">Nonprofits</a> <a href="/solutions/government" data-track="click" data-component="government">Government</a> <a href="/solutions/education" data-track="click" data-component="education">Education</a> </div> <div class="dropdown-menu-section" data-section-group="use_cases"> <div class="menu-section-header"><strong>Use cases</strong></div> <a href="/resources/elections" data-track="click" data-component="elections">Elections and polling</a> <a href="/resources/sports" data-track="click" data-component="sports">Sports and competitions</a> <a href="/visualisations/maps" data-track="click" data-component="maps">Maps</a> <a href="/resources/visualize-survey-data" data-track="click" data-component="survey">Survey responses</a> <a href="/visualisations/scrollytelling" data-track="click" data-component="scrollytelling">Scrollytelling</a> </div> </div> </div> <div class="dropdown-menu-item-wrapper"> <div class="dropdown-menu-item has-dropdown" tabindex="0" aria-haspopup="true" href="/resources"><h1 data-section="resources" data-track="click" data-component="resources" class="menu-item">Resources</h1></div> <div class="dropdown-menu-contents"> <div class="dropdown-menu-section" data-section-group="resources"> <div class="menu-section-header"><strong>Explore</strong></div> <a href="/blog" data-track="click" data-component="blog">Blog</a> <a href="/visualisations" data-track="click" data-component="chart_guides">Chart guides</a> <a href="/whats-new" data-track="click" data-component="whats_new">What's new</a> </div> <div class="dropdown-menu-section" data-section-group="resources"> <div class="menu-section-header"><strong>Learn</strong></div> <a href="https://helpcenter.flourish.studio/hc/en-us" target="_blank" data-track="click" data-component="help_docs">Help docs</a> <a href="/resources/webinar" data-track="click" data-component="webinars">Webinars</a> <a href="/resources/training" data-track="click" data-component="training">Training</a> <a href="/resources/datasets" data-track="click" data-component="datasets">Datasets</a> <a href="/accessibility" data-track="click" data-component="accessibility">Accessibility</a> </div> <div class="dropdown-menu-section" data-section-group="resources"> <div class="menu-section-header"><strong>Develop</strong></div> <a href="/experts" data-track="click" data-component="experts">Experts network</a> <a href="https://developers.flourish.studio/" target="_blank" data-track="click" data-component="developers">Flourish for developers</a> </div> </div> </div> <div class="dropdown-menu-item-wrapper"> <a class="dropdown-menu-item" href="/pricing" data-track="click" data-component="pricing"> <h1 class="menu-item">Pricing</h1> </a> </div> </div> <div id="account-menu"> <a class="btn log-in-link" target="_blank" rel="noopener" href="https://app.flourish.studio/login" data-track="click" data-component="login">Log in</a> <a class="btn sign-up-link" target="_blank" rel="noopener" href="https://app.flourish.studio/register" data-track="click" data-component="signup">Sign up</a> </div> </div> </div> </div> </div> <div class="content"> <div class="row static"> <div class="page page-guide" id="page-scrollytelling"> <script> window.Flourish = {}; </script> <div class="page-header"> <div class="row-inner"> <div class="header-container"> <div class="guide-header-container"> <h1> Scrollytelling </h1> </div> <h2>Our new no-code solution empowers you to create captivating and immersive storytelling experiences</h2> <div class="header-cta"> <a target="_blank" rel="noopener" href="https://app.flourish.studio/register"><div class="btn">Get started now</div></a> </div> </div> </div> </div> <div class="page-content-container"> <div class="row-inner"> <style> .fl-scrolly-wrapper iframe { pointer-events: none; /* TEMP: solution until we disable scroll on the map */ height: calc(100vh - 48px) !important; top: 48px !important; } @media(min-width: 420px) { .fl-scrolly-wrapper iframe { height: calc(100vh - 60px) !important; top: 60px !important; } } .fl-scrolly-caption p { font-weight: lighter; } /* video { max-width: 100%; height: auto; } */ </style> </div>  <div class="flourish-embed" data-src="story/1906749?16"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script></div> <div class="row-inner">  <div class="row feature-section "> <div class="row-header"> <h2>Publish and embed anywhere on the web</h2> <p>Publish and embed your immersive scrollytelling experiences on any web page, with responsive design. No coding skills or technical support required. </p> </div> <div class="row-visual"> <video muted autoplay loop playsinline preload="none" poster="../../images/flourish_platform.png" src="https://public.flourish.studio/uploads/654906/de188ff6-8010-4a6a-bb9c-6c0295c5c3a6.webm" type="video/mp4"> </video> </div> </div> <div class="row feature-section text-right"> <div class="row-header"> <h2>Immersive, dynamic storytelling</h2> <p>Create engaging content experiences that captivate the audience, and inspire meaningful connections with your message. The best part? Everything can be done within the Flourish editor. </p> </div> <div class="row-visual"><img src="https://public.flourish.studio/uploads/654906/5add62cb-3484-477f-8fc6-fae4b9b569fe.webp" alt="" /></div> </div> <div class="row feature-section "> <div class="row-header"> <h2>Flexible theming so you鈥檙e always on brand</h2> <p>Create branded experiences that are easy to tailor with our theming options. </p> </div> <div class="row-visual"> <video muted autoplay loop playsinline preload="none" poster="../../images/flourish_platform.png" src="https://public.flourish.studio/uploads/654906/06499aff-55bc-4a32-b76f-fd30a230140d.webm" type="video/mp4"> </video> </div> </div> </div>  </div> <div class="page-content-container" id="get-started-cta"> <div class="get-started-cta-container"> <div class="cta-video"> <video muted autoplay loop playsinline preload="none" poster="../../images/flourish_platform.png" src=" /images/features/scrolly-browser-light.mp4" type="video/mp4"> </video> </div> <div class="cta-content"> <h1> Get started </h1> <h2> Scrollytelling is now available on our Publisher and Enterprise plans. Learn more about <a href="https://flourish.studio/pricing/" target="_blank">our pricing</a> or <a href="https://flourish.studio/talk-to-us/" target="_blank">contact us</a> for more information. </h2> <a href=" https://app.flourish.studio/projects" target="_blank"> <button class="btn cta"> Try it now</button> </a> </div> </div> </div> </div> </div> </div> <div class="row footer" data-section="footer"> <div class="row-contents"> <div class="row-inner"> <div class="footer-container">  <div class="footer-section company" data-section-group="company"> <h4>Company</h4> <ul> <li><a href="/company" data-track="click" data-component="about">About us</a></li> <li><a target="_blank" rel="noopener" href="https://www.lifeatcanva.com/en/locations/united-kingdom/" data-track="click" data-component="careers">Careers</a></li> <li><a href="/security" data-track="click">Security</a></li> <li><a href="/pricing" data-track="click">Pricing</a></li> <li><a href="/terms" data-track="click">Terms</a></li> <li><a href="/privacy" data-track="click">Privacy policy</a></li> <li><a href="/resources/faq" data-track="click">FAQs</a></li> </ul> </div>  <div class="footer-section explore" data-section-group="explore"> <h4>Explore</h4> <ul> <li><a href="/examples" data-track="click">Examples</a></li> <li><a href="/resources/elections" data-track="click">Elections & polls</a></li> <li><a href="/resources/sports" data-track="click">Sports & competitions</a></li> <li><a href="/visualisations/maps" data-track="click">Interactive maps</a></li> <li><a href="/resources/visualize-survey-data" data-track="click" data-component="survey">Survey responses</a></li> <li><a href="/visualisations/scrollytelling" data-track="click">Scrollytelling</a></li> <li><a href="/visualisations" data-track="click">Chart guides</a></li> <li><a href="/blog" data-track="click">Blog</a></li> </ul> </div>  <div class="footer-section solutions" data-section-group="solutions"> <h4>Solutions</h4> <ul> <li><a href="/solutions/financial-services" data-track="click" data-component="financial">Financial services</a></li> <li><a href="/solutions/professional-services" data-track="click" data-component="professional">Professional services</a></li> <li><a href="/solutions/newsrooms" data-track="click">Newsrooms</a></li> <li><a href="/solutions/marketing" data-track="click">Marketing</a></li> <li><a href="/solutions/not-for-profit" data-track="click" data-component="nonprofit">Nonprofits</a></li> <li><a href="/solutions/government" data-track="click">Government</a></li> <li><a href="/solutions/education" data-track="click">Education</a></li> </ul> </div>  <div class="footer-section resources" data-section-group="resources"> <h4>Resources</h4> <ul> <li><a href="/whats-new" data-track="click" data-component="whats_new">What's new</a></li> <li><a target="_blank" rel="noopener" href="https://help.flourish.studio/" data-track="click" data-component="help_docs" onclick="FlourishAnalytics.trackOutbound('https://help.flourish.studio/', this)">Help docs</a></li> <li><a href="/resources/training" data-track="click">Training</a></li> <li><a href="/resources/webinar" data-track="click">Webinars</a></li> <li><a href="/resources/datasets" data-track="click">Datasets</a></li> <li><a href="/accessibility" data-track="click">Accessibility</a></li> <li><a href="/experts" data-track="click">Experts network</a></li> <li><a href="https://flourish.studio/developers" data-track="click" onclick="FlourishAnalytics.trackOutbound('https://flourish.studio/developers', this)">For developers</a></li> </ul> </div>  <div class="footer-section company-info"> <h4>Flourish</h4> <p class="break-text">Flourish is a registered trademark of <span>Canva UK Operations Ltd, UK</span></p> <p>company 08825531</p> <p>33 Hoxton Square</p> <p>London N1 6NN</p> </div> </div> </div>  <div class="footer-container-black"> <div class="row-inner"> <div class="footer-section stay-in-touch"> <h4>Stay in touch</h4> <div class="footer-row-items"> <div class="btn-social-container"> <a href="/newsletter" data-track="click" data-component="newsletter"> <div class="footer-btn">Subscribe to our newsletter</div> </a> <div class="social-links" data-section-group="social"> <a target="_blank" rel="noopener" href="https://x.com/f_l_o_u_r_i_s_h" aria-label="X" data-track="click" data-component="x"> <img class="icon" src="/images/icons/x-logo.svg"> </a> <a target="_blank" rel="noopener" href="https://www.instagram.com/madewithflourish/" aria-label="instagram" data-track="click" data-component="instagram"> <img class="icon" src="/images/icons/instagram-logo.svg"> </a> <a target="_blank" rel="noopener" href="https://www.linkedin.com/company/f-l-o-u-r-i-s-h" aria-label="LinkedIn" data-track="click" data-component="linkedin"> <img class="icon" src="/images/icons/linkedin-logo.svg"> </a> <a target="_blank" rel="noopener" href="https://www.youtube.com/channel/UCWTf4OgEH_MiDvfmjPdkTxg" aria-label="YouTube" data-track="click" data-component="youtube"> <img class="icon" src="/images/icons/youtube-logo.svg"> </a> </div> </div> <div class="footer-credit"> <p>漏 2024 Flourish, a Canva UK Operations Limited brand. All rights reserved.</p> </div> </div> </div> </div> </div> </div> </div> <script src="/js/script.js?ddcb49de92eb2662628cec21b9bfeefd"></script> <script src="/js/store-inbound-fields.js"></script> </body> </html>

CINXE.COM

Scrollytelling