How can I display the URL content using the EMBED in a container with the code set to Webflow? It currently only shows the link on the page.

To display the content of a URL using the Embed component in Webflow, you can make use of the `` element. The `<iframe>` allows you to embed external content within your Webflow page. Here's how you can do it:</p><p>1. Add an Embed component to your Webflow page by dragging and dropping it onto the desired container.</p><p>2. In the settings panel of the Embed component, you'll find the input field for the embed code. This is where you'll input the code necessary to display the URL content.</p><p>3. First, retrieve the URL of the content you want to embed. This could be a video, a map, a social media post, or any other web page or resource.</p><p>4. Once you have the URL, construct an `<iframe>` tag with the `src` attribute set to your desired URL. For example:</p><p>```html</p><iframe src="<https://www.example.com>">\`\`\`

Replace `https://www.example.com` with the actual URL you want to embed.

5. Copy the generated `` code.</p><p>6. Go back to your Webflow Designer and paste the `<iframe>` code into the embed code input field of the Embed component.</p><p>7. Save and publish your changes.</p><p>Once you publish your Webflow site, the content from the provided URL will be displayed within the container you placed the Embed component in.</p><p>Keep in mind that not all websites allow themselves to be embedded in an `<iframe>`, as they may have certain security measures in place. In such cases, you may encounter limitations or restrictions when trying to embed their content.</p><p>Additionally, note that embedding external content can affect the performance and load times of your website, depending on the size and complexity of the embedded content. It's always a good idea to optimize and test your page performance to ensure a smooth user experience.</p></div></div><div class="content31_newsletter_wrapper"><div class="content31_newsletter"><div class="margin-bottom margin-small"><div class="author-bio-name_heading">Webflow Resources</div></div><a href="https://link.flowradar.com/webflow-best-templates" target="_blank" class="answers-sidebar-cta_div w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--carbon" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M26 6v4H6V6h20m0-2H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM10 16v10H6V16h4m0-2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V16a2 2 0 0 0-2-2zm16 2v10H16V16h10m0-2H16a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V16a2 2 0 0 0-2-2z"></path></svg></div><div>Webflow templates</div></a><a href="https://link.flowradar.com/webflow-inspiration" target="_blank" class="answers-sidebar-cta_div w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ph" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><g fill="currentColor"><path d="M208 104a79.86 79.86 0 0 1-30.59 62.92A24.29 24.29 0 0 0 168 186v6a8 8 0 0 1-8 8H96a8 8 0 0 1-8-8v-6a24.11 24.11 0 0 0-9.3-19A79.87 79.87 0 0 1 48 104.45C47.76 61.09 82.72 25 126.07 24A80 80 0 0 1 208 104Z" opacity=".2"></path><path d="M176 232a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8Zm40-128a87.55 87.55 0 0 1-33.64 69.21A16.24 16.24 0 0 0 176 186v6a16 16 0 0 1-16 16H96a16 16 0 0 1-16-16v-6a16 16 0 0 0-6.23-12.66A87.59 87.59 0 0 1 40 104.5c-.26-47.67 38.26-87.35 85.88-88.5A88 88 0 0 1 216 104Zm-16 0a72 72 0 0 0-73.74-72c-39 .92-70.47 33.39-70.26 72.39a71.64 71.64 0 0 0 27.64 56.3A32 32 0 0 1 96 186v6h24v-44.69l-29.66-29.65a8 8 0 0 1 11.32-11.32L128 132.69l26.34-26.35a8 8 0 0 1 11.32 11.32L136 147.31V192h24v-6a32.12 32.12 0 0 1 12.47-25.35A71.65 71.65 0 0 0 200 104Z"></path></g></svg></div><div>Webflow inspiration</div></a></div><div class="content31_newsletter"><div class="margin-bottom margin-small"><div class="author-bio-name_heading">Rate this answer</div></div><div class="item-feedback_div"><div class="jetboost-toggle-favorite-b92e"><a href="#" class="thumbs-up-not-favorite w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z"></path><path stroke-linejoin="round" d="M7 20V9"></path></g></svg></div></a><a href="#" class="thumbs-up-favorited w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z"></path><path stroke-linejoin="round" d="M7 20V9"></path></g></svg></div></a></div><div class="jetboost-toggle-favorite-4q76"><a href="#" class="thumbs-down-not-favorite w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 3.5H4.1a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6h2.768a2 2 0 0 1 1.715.971l2.71 4.517a1.631 1.631 0 0 0 2.961-1.308l-1.022-3.408a.6.6 0 0 1 .574-.772h4.575a2 2 0 0 0 1.93-2.526l-1.91-7A2 2 0 0 0 16.473 3.5Z"></path><path stroke-linejoin="round" d="M7 14.5v-11"></path></g></svg></div></a><a href="#" class="thumbs-down-favorited w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 3.5H4.1a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6h2.768a2 2 0 0 1 1.715.971l2.71 4.517a1.631 1.631 0 0 0 2.961-1.308l-1.022-3.408a.6.6 0 0 1 .574-.772h4.575a2 2 0 0 0 1.93-2.526l-1.91-7A2 2 0 0 0 16.473 3.5Z"></path><path stroke-linejoin="round" d="M7 14.5v-11"></path></g></svg></div></a></div></div></div></div></div></div></div></div></header><section class="section_top-items"><div class="padding-global"><div class="container-large"><div class="padding-section-large"><div id="w-node-_440228f7-117e-d715-0416-8cc78dc9b51e-bfb8c375" class="margin-bottom margin-medium"><div class="blog65_heading-wrapper"><div class="blog65_heading"><div class="max-width-large-2"><div class="margin-bottom margin-xsmall"><h2 class="heading-medium">Other Webflow Questions</h2></div></div></div><div class="blog65_button-row hide-mobile-landscape hide"><a href="/tutorial/explore?integrations=integromat%7Cparabola%7Czapier" class="button-md secondary w-inline-block"><div class="text-sm-medium secondary">Explore Logic tutorials</div></a></div></div></div><div class="answers-collection_wrapper w-dyn-list"><div role="list" class="answers-collection_list w-dyn-items"><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/error-adding-users-to-access-groups-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">What could be causing the error message "There was an error saving the user details" when trying to add users back to access groups in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/fix-webflow-blog-pagination-issue" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I fix the issue where clicking on the next or previous pagination buttons on my Webflow blog shoots me back to the top of the page instead of staying on the section?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/can-underline-color-in-text-link-be-changed-without-altering-text-color" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can the underline color in a text link be changed in Webflow without altering the text color?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/where-can-adjust-column-gutter-widths-guide-overlay-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Where can I adjust the column and gutter widths of the guide overlay in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/causing-general-error-reset-password-attempting-actions-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">What could be causing the general error message "There was an error resetting your password. Please try again, or contact us if you continue to have problems" when attempting actions like login, sign up, or reset password on Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/reliable-custom-code-remove-scrollbars-browsers-webflow-website" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is there a reliable custom code to remove scrollbars on all browsers for elements in a Webflow website?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/webflow-tutorial-utilize-marco-template-inexperienced-struggling" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I utilize Webflow to follow a tutorial and make the necessary changes to my Marco template if I'm inexperienced and struggling with the interface?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/fix-persistent-overflow-issue-right-side-phone-asset-work-abroad" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I fix the persistent overflow issue on the right side phone asset on the "work - Abroad" page in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-to-remove-area-in-webflow-grid-system" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How do I remove a pre-set "Area" in Webflow's grid system?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/is-it-possible-to-switch-my-domain-from-squarespace-to-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is it possible to switch my domain from Squarespace to Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-to-create-link-in-webflow-for-specific-word-in-sentence" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I create a link within a paragraph in Webflow for a specific word in a sentence?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/extent-develop-food-delivery-web-app-driver-restaurant-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">What is the extent to which I can develop a Food Delivery web app, including a Driver app and a Restaurant app, using Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/what-to-do-trouble-updating-case-studies-webflow-template-cms" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">What should I do if I am having trouble updating my case studies in Webflow using a template that is designed with CMS?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/tutorial-creating-resizing-navbar-smooth-scroll-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is there a tutorial available on Webflow or any third party tool that explains how to create a resizing nav bar that smoothly adjusts the logo, nav bar height, and other elements as you scroll down on a webpage?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/is-it-intended-functionality-in-webflow-for-interactions-to-be-duplicated" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is it intended functionality in Webflow for interactions to be duplicated twice and lose their "replace elements in animation" settings when a page with interactions is duplicated to create an alternate version?</div></a></div></div></div><div class="answers-collection_wrapper w-dyn-list"><div role="list" class="answers-collection_list w-dyn-items"><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/can-webflow-be-used-to-call-a-css-or-js-file-stored-on-different-server" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/webflow-youtube-component-recognize-channel-ids-instead-of-video-ids" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-can-i-use-the-finsweet-script-to-manage-two-different-sliders-on" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/prevent-fullscreen-slider-pause-on-hover-link-sliders-javascript" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/fix-scroll-issue-iphone-safari-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-can-i-prevent-scroll-when-my-nav-is-open-in-webflow-using-code" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-to-add-date-filtering-to-my-list-using-finsweet-cms-filtering" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/change-language-publication-dates-webflow-cms-collection-portuguese" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/whitelist-IP-user-agent-third-party-vendor-crawl-Webflow-site" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/configure-webflow-forms-exclude-empty-unchecked-checkboxes-customize-email-text" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/dynamically-redirect-cms-created-after-form-submission-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I dynamically redirect to a CMS created after form submission in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/make-menu-close-when-link-clicked-in-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I make the menu close when a link is clicked in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-hide-no-items-found-empty-field-webflow-second-multi-image" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/implement-swipe-functionality-between-tab-panes-using-custom-code-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/add-user-input-end-redirect-url-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I add user input to the end of the redirect URL in Webflow?</div></a></div></div></div></div></div></div></section><footer class="footer5_component"><div class="page-padding"><div class="container-large"><div class="padding-vertical padding-xxlarge"><div class="padding-bottom padding-xxlarge"><div class="w-layout-grid footer5_top-wrapper"><a href="/" id="w-node-_4c56fd38-71c5-d940-a650-19ed1da6aaa9-1da6aa91" class="footer5_logo-link w-nav-brand"><img src="https://cdn.prod.website-files.com/61e46d66024d2ef28c3f257c/63abd9c7dd43e2eacc5383b2_fr-logo-new.svg" loading="lazy" alt="" class="footer_logo"/></a><div class="footer5_link-list"><div class="footer5_column-heading">Templates</div><a href="/templates-categories/cms" class="footer5_link">CMS templates</a><a href="/?free-or-paid=Free" class="footer5_link">Free templates</a><a href="/templates-categories/saas" class="footer5_link">SaaS templates</a><a href="/templates-categories/ecommerce" class="footer5_link">Ecommerce templates</a><a href="/template/explore" class="footer5_link">All Webflow templates</a></div><div class="footer5_link-list"><div class="footer5_column-heading">Cloneables</div><a href="/cloneable-categories/styleguide" class="footer5_link">Styleguides</a><a href="/cloneable-categories/accordion" class="footer5_link">Accordions</a><a href="/cloneable-categories/text-effects" class="footer5_link">Text animations</a><a href="/cloneable-categories/cms" class="footer5_link">CMS cloneables</a><a href="/cloneable/explore" class="footer5_link">All Webflow cloneables</a></div><div class="footer5_link-list"><div class="footer5_column-heading">Resources</div><a href="/inspiration" class="footer5_link w-inline-block"><div>Inspiration</div><div class="badge gray footer"><div class="text-xs-medium badge-label gray">New</div></div></a><a href="/products/webflow-domain-list" class="footer5_link w-inline-block"><div>Products</div><div class="badge gray footer"><div class="text-xs-medium badge-label gray">New</div></div></a><a href="/integration/explore" class="footer5_link">Webflow Tools</a><a href="/tutorials" class="footer5_link">Webflow Tutorials</a><a href="/expert/explore" class="footer5_link">Designers</a><a href="/webflow-checklist" class="footer5_link">Webflow checklist</a><a href="/snippet/explore" class="footer5_link w-inline-block"><div>Code snippets</div></a><a href="/webflow-keyboard-shortcuts" class="footer5_link w-inline-block"><div>Keyboard shortcuts</div></a><a href="/webflow-limitations" class="footer5_link w-inline-block"><div>Webflow limits</div></a><a href="/changes" class="footer5_link w-inline-block"><div>Changelog</div><div class="badge gray footer"><div class="text-xs-medium badge-label gray">New</div></div></a><a href="/add-resource" class="footer5_link">Add resource</a></div><div class="footer5_link-list hide"><div class="footer5_column-heading">Column Five</div><a href="#" class="footer5_link">Link Twenty One</a><a href="#" class="footer5_link">Link Twenty Two</a><a href="#" class="footer5_link">Link Twenty Three</a><a href="#" class="footer5_link">Link Twenty Four</a><a href="#" class="footer5_link">Link Twenty Five</a></div></div></div><div class="line-divider breadcrumbs"></div><div class="footer5_newsletter-wrapper"><div class="footer5_newsletter-text-wrapper"><div class="text-weight-semibold text-size-medium">Get the best of Webflow delivered weekly</div><p>Each week we send a roundup of all things Webflow</p></div><div class="footer5_form-block w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" class="footer5_form" data-wf-page-id="64d4092642c97b70bfb8c375" data-wf-element-id="4c56fd38-71c5-d940-a650-19ed1da6aa9c" data-turnstile-sitekey="0x4AAAAAAAQTptj2So4dx43e"><input class="form-input-2 w-input" maxlength="256" name="email" data-name="email" placeholder="Enter your email" type="email" id="email-6" required=""/><input type="submit" data-wait="Please wait..." class="button-xl w-button" value="Subscribe"/></form><div class="text-size-tiny">No spam, just weekly Webflow ♥ goodness.</div><div class="success-message-2 w-form-done"><div>Thank you! Your submission has been received!</div></div><div class="error-message w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div><div class="padding-top padding-medium"><div class="footer5_bottom-wrapper"><div class="w-layout-grid footer5_legal-list"><div id="w-node-_4c56fd38-71c5-d940-a650-19ed1da6aaf0-1da6aa91" class="footer5_credit-text">© 2024 FlowRadar. All right reserved.</div><a href="#" class="footer5_legal-link hide">Privacy Policy</a><a href="#" class="footer5_legal-link hide">Terms of Service</a><a href="#" class="footer5_legal-link hide">Cookies Settings</a></div><div class="w-layout-grid footer5_social-icons"><a href="https://www.facebook.com/FlowRadarcom/" target="_blank" class="footer5_social-link w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.5 6H13.5C12.9477 6 12.5 6.44772 12.5 7V10H16.5C16.6137 9.99748 16.7216 10.0504 16.7892 10.1419C16.8568 10.2334 16.8758 10.352 16.84 10.46L16.1 12.66C16.0318 12.8619 15.8431 12.9984 15.63 13H12.5V20.5C12.5 20.7761 12.2761 21 12 21H9.5C9.22386 21 9 20.7761 9 20.5V13H7.5C7.22386 13 7 12.7761 7 12.5V10.5C7 10.2239 7.22386 10 7.5 10H9V7C9 4.79086 10.7909 3 13 3H16.5C16.7761 3 17 3.22386 17 3.5V5.5C17 5.77614 16.7761 6 16.5 6Z" fill="CurrentColor"/> </svg></div></a><a href="#" class="footer5_social-link hide w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 3H8C5.23858 3 3 5.23858 3 8V16C3 18.7614 5.23858 21 8 21H16C18.7614 21 21 18.7614 21 16V8C21 5.23858 18.7614 3 16 3ZM19.25 16C19.2445 17.7926 17.7926 19.2445 16 19.25H8C6.20735 19.2445 4.75549 17.7926 4.75 16V8C4.75549 6.20735 6.20735 4.75549 8 4.75H16C17.7926 4.75549 19.2445 6.20735 19.25 8V16ZM16.75 8.25C17.3023 8.25 17.75 7.80228 17.75 7.25C17.75 6.69772 17.3023 6.25 16.75 6.25C16.1977 6.25 15.75 6.69772 15.75 7.25C15.75 7.80228 16.1977 8.25 16.75 8.25ZM12 7.5C9.51472 7.5 7.5 9.51472 7.5 12C7.5 14.4853 9.51472 16.5 12 16.5C14.4853 16.5 16.5 14.4853 16.5 12C16.5027 10.8057 16.0294 9.65957 15.1849 8.81508C14.3404 7.97059 13.1943 7.49734 12 7.5ZM9.25 12C9.25 13.5188 10.4812 14.75 12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25C10.4812 9.25 9.25 10.4812 9.25 12Z" fill="CurrentColor"/> </svg></div></a><a href="https://twitter.com/flowradarcom" class="footer5_social-link w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.9728 6.7174C20.5084 7.33692 19.947 7.87733 19.3103 8.31776C19.3103 8.47959 19.3103 8.64142 19.3103 8.81225C19.3154 11.7511 18.1415 14.5691 16.0518 16.6345C13.962 18.6999 11.1312 19.8399 8.19405 19.7989C6.49599 19.8046 4.81967 19.4169 3.29642 18.6661C3.21428 18.6302 3.16131 18.549 3.16162 18.4593V18.3604C3.16162 18.2313 3.26623 18.1267 3.39527 18.1267C5.06442 18.0716 6.67402 17.4929 7.99634 16.4724C6.48553 16.4419 5.12619 15.5469 4.5006 14.1707C4.46901 14.0956 4.47884 14.0093 4.52657 13.9432C4.57429 13.8771 4.653 13.8407 4.73425 13.8471C5.19342 13.8932 5.65718 13.8505 6.1002 13.7212C4.43239 13.375 3.17921 11.9904 2.99986 10.2957C2.99349 10.2144 3.02992 10.1357 3.096 10.0879C3.16207 10.0402 3.24824 10.0303 3.32338 10.062C3.77094 10.2595 4.25409 10.3635 4.74324 10.3676C3.28184 9.40846 2.65061 7.58405 3.20655 5.92622C3.26394 5.76513 3.40181 5.64612 3.5695 5.61294C3.73718 5.57975 3.90996 5.63728 4.02432 5.76439C5.99639 7.86325 8.70604 9.11396 11.5819 9.25279C11.5083 8.95885 11.4721 8.65676 11.4741 8.35372C11.501 6.76472 12.4842 5.34921 13.9634 4.76987C15.4425 4.19054 17.1249 4.56203 18.223 5.71044C18.9714 5.56785 19.695 5.31645 20.3707 4.96421C20.4202 4.93331 20.483 4.93331 20.5325 4.96421C20.5634 5.01373 20.5634 5.07652 20.5325 5.12604C20.2052 5.87552 19.6523 6.50412 18.9509 6.92419C19.5651 6.85296 20.1685 6.70807 20.7482 6.49264C20.797 6.45942 20.8611 6.45942 20.9099 6.49264C20.9508 6.51134 20.9814 6.54711 20.9935 6.59042C21.0056 6.63373 20.998 6.68018 20.9728 6.7174Z" fill="CurrentColor"/> </svg></div></a><a href="#" class="footer5_social-link hide w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3ZM8 18C8.27614 18 8.5 17.7761 8.5 17.5V10.5C8.5 10.2239 8.27614 10 8 10H6.5C6.22386 10 6 10.2239 6 10.5V17.5C6 17.7761 6.22386 18 6.5 18H8ZM7.25 9C6.42157 9 5.75 8.32843 5.75 7.5C5.75 6.67157 6.42157 6 7.25 6C8.07843 6 8.75 6.67157 8.75 7.5C8.75 8.32843 8.07843 9 7.25 9ZM17.5 18C17.7761 18 18 17.7761 18 17.5V12.9C18.0325 11.3108 16.8576 9.95452 15.28 9.76C14.177 9.65925 13.1083 10.1744 12.5 11.1V10.5C12.5 10.2239 12.2761 10 12 10H10.5C10.2239 10 10 10.2239 10 10.5V17.5C10 17.7761 10.2239 18 10.5 18H12C12.2761 18 12.5 17.7761 12.5 17.5V13.75C12.5 12.9216 13.1716 12.25 14 12.25C14.8284 12.25 15.5 12.9216 15.5 13.75V17.5C15.5 17.7761 15.7239 18 16 18H17.5Z" fill="CurrentColor"/> </svg></div></a></div></div><div class="margin-top margin-small"><div class="footer-about_div"><div class="footer-about text-xs-normal">FlowRadar.com is not affiliated with Webflow. We simply ♥ <a href="https://link.flowradar.com/webflow" target="_blank" class="footer_links">Webflow</a>. This website was built in <a href="https://link.flowradar.com/webflow" target="_blank" class="footer_links">Webflow</a>, connected to <a href="https://link.flowradar.com/airtable" target="_blank" class="footer_links">Airtable</a> and <a href="https://www.flowmonk.com/?ref=flowradar" class="footer_links">real-time Airtable & Webflow syncing</a> by Flowmonk. Search & filtering powered by <a href="https://link.flowradar.com/jetboost" target="_blank" class="footer_links">Jetboost</a>. Webflow components by <a href="https://link.flowradar.com/relume" target="_blank" class="footer_links">Relume</a>. FlowRadar is reader-supported, some links may be affiliate links.</div></div></div></div></div></div></div></footer></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=61e46d66024d2ef28c3f257c" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/61e46d66024d2ef28c3f257c/js/webflow.9f568fd71.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script> <script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js"></script> <script> const { autocomplete, getAlgoliaResults } = window['@algolia/autocomplete-js']; const appId = "0J2XGWBAEG"; const apiKey = "780ddde038795dc79d2d680bdfa1bad8"; const searchClient = algoliasearch(appId, apiKey); const { setIsOpen } = autocomplete({ container: "#autocomplete", placeholder: "Search ( ⌘ + k )", detachedMediaQuery: '', openOnFocus: true, getSources({ query, state }) { if (!query) { return []; } return [ { sourceId: "cloneables", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'cloneables', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Cloneables</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/cloneables/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/cloneables/${item.Slug}"><img src="${item['Cloneable Image']}" alt="${item.Name}" class="algolia-cloneable_image" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="aa-ItemContentSubtitle hide"> Published in <strong>${item["Cloneable Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-3lines"> ${components.Snippet({ hit: item, attribute: 'Webflow Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/cloneables/" + item.Slug; }, }, { sourceId: "templates", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'templates', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Templates</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/templates/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item.Screenshot}" alt="${item.Name}" class="algolia-template_image" /></a> </div> <div class="aa-ItemContentBody hide"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Template Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-3lines hide"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/templates/" + item.Slug; }, }, { sourceId: "customcode", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'customcode', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Code snippets</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/custom-code/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item['Custom code - Small']}" alt="${item.Name}" class="algolia-cloneable_image" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Code - Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-3lines"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/custom-code/" + item.Slug; }, }, { sourceId: "integrations", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'integrations', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Integrations</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/integrations/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item.Logo}" alt="${item.Name}" class="algolia-cloneable_image small" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Integration - Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-2lines"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/integrations/" + item.Slug; }, }, { sourceId: "tutorials", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'tutorials', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Tutorials</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/tutorials/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item['Youtube thumbnail - normal (320x180)']}" alt="${item.Name}" class="algolia-cloneable_image" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Integrations mentioned/utilized"]}</strong> </div> <div class="aa-ItemContentDescription text-style-2lines"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/tutorials/" + item.Slug; }, }, { sourceId: "experts", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'experts', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 7 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Experts</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/experts/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item['Profile image - Small']}" alt="${item.Name}" class="algolia-cloneable_image experts" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item.Categories}</strong> </div> <div class="algolia-experts-items_div"> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Templates']}</div></div> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Cloneables']}</div></div> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Tutorials']}</div></div> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Code Snippets']}</div></div> </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/experts/" + item.Slug; }, }, ]; } }); document.addEventListener('keydown', (event) => { if (event.metaKey && event.key.toLowerCase() === 'k') { setIsOpen(true); } }); </script> <style> /* Algolia */ .aa-Source[data-autocomplete-source-id='templates'] .aa-List { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.5rem; } .aa-Source[data-autocomplete-source-id='templates'] .aa-Item { display: flex; flex-direction: column; justify-content: center; } .aa-Source[data-autocomplete-source-id='illustrations'] .aa-List { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.5rem; } .aa-Source[data-autocomplete-source-id='illustrations'] .aa-Item { display: flex; flex-direction: column; justify-content: center; } .aa-Source {margin-top: 1.5rem; margin-bottom: 1.5rem;} .aa-SourceHeaderTitle {color: hsla(271.16883116883116, 64.71%, 46.67%, 1.00); font-size: 1.15rem; font-weight: 500;} .aa-ItemContentTitle {font-size:.875rem} .aa-SourceHeader {font-size:1.125rem; font-weight:600;} .aa-DetachedSearchButton {min-width: auto; margin-right: 0; padding: 12px 16px 12px 44px; border-color: #d6d6d6; background-image: url("https://global-uploads.webflow.com/61e46d66024d2ef28c3f257c/61ec775e4501442947de4f99_search.png"); background-position: 18px 50%; background-size: 15px 15px; background-repeat: no-repeat; background-attachment: scroll; min-height: 44px; margin-bottom: 0; border: 1px solid #d0d5dd; box-shadow: 1px 1px 2px 0 rgba(16,24,40,.05); font-size: 1rem; line-height: 1.5rem; border-radius: 6px; overflow: hidden; } .aa-DetachedSearchButtonIcon {display:none;} .aa-DetachedContainer {bottom: 3%;} .aa-PanelLayout aa-Panel--scrollable {max-height: var(--aa-detached-modal-max-height);} :root { --aa-overlay-color-rgb:115,114,129; --aa-overlay-color-alpha:0.95; --aa-panel-max-height: 100% !important; --aa-detached-modal-max-height: 100% !important; } </style>  <script> // Get the thumbs-up and thumbs-down elements const thumbsUp = document.querySelector('.thumbs-up-not-favorite'); const thumbsDown = document.querySelector('.thumbs-down-not-favorite'); // Get the thumbs wrappers const thumbsUpWrapper = document.querySelector('.jetboost-toggle-favorite-b92e'); const thumbsDownWrapper = document.querySelector('.jetboost-toggle-favorite-4q76'); // Function to add or remove the disabled class based on the condition function toggleDisabledClass(element, condition) { if (condition) { element.classList.add('disabled'); element.style.pointerEvents = 'none'; } else { element.classList.remove('disabled'); element.style.pointerEvents = 'auto'; } } // Watch for changes in the class of thumbs-up const thumbsUpObserver = new MutationObserver(() => { const isHideClassAdded = thumbsUp.classList.contains('jetboost-list-item-hide'); toggleDisabledClass(thumbsUpWrapper, isHideClassAdded); }); thumbsUpObserver.observe(thumbsUp, { attributes: true }); // Watch for changes in the class of thumbs-down const thumbsDownObserver = new MutationObserver(() => { const isHideClassAdded = thumbsDown.classList.contains('jetboost-list-item-hide'); toggleDisabledClass(thumbsDownWrapper, isHideClassAdded); }); thumbsDownObserver.observe(thumbsDown, { attributes: true }); </script> </body></html>