What is FlowsWave

Setting up FlowsWave

Templates

Editing your pop-up

Triggering your pop-up from Flows

Learn how FlowsWave works and how to setup your first site

Getting started

Learn the concepts of how to create a popup on FlowsWave

Creating a pop-up

Learn how to combine Flows and FlowsWave together

Triggering

<h2>Engage and collect feedback effortlessly!</h2><p>FlowsWave is a new product powered by <strong>Flows </strong>that is designed to make user engagement a breeze by allowing you to send pop--ups directly to users on the frontend and gather feedback in real-time. In this help article, we'll walk you through everything you need to know to get started with FlowsWave and make the most of its features.</p><h2>What is FlowsWave?</h2><p>FlowsWave is a flexible, no-code tool that allows you to create, customise, and deploy pop-ups to users visiting your website or app. Whether you're looking to collect feedback on a new feature, measure user satisfaction, or simply engage users in an interactive way, FlowsWave has you covered. With its seamless integration into Flows, you can easily automate the pop-up deployment process based on various triggers and conditions.</p><h3>Key benefits of FlowsWave</h3><ul><li><strong>No-code solution</strong>: FlowsWave operates within the Flows ecosystem, making it easy to create automated feedback pop-ups without any coding knowledge.</li><li><strong>Real-time feedback collection</strong>: Gather valuable insights directly from users as they engage with your platform, helping you make informed and data-driven decisions.</li><li><strong>Customisable pop-ups</strong>: Tailor your messages, styling, and targeting options to suit your brand and audience.</li><li><strong>Trigger-based automation</strong>: Use Flows to set specific triggers and conditions for when and where the pop-ups appear, ensuring maximum relevance and effectiveness.</li></ul>

<h2>Setting up a site</h2><p>To get started with FlowsWave, create a site from the 'App Panel' and set your website's domain for this site. Pop-ups in FlowsWave are organised under individual sites and are linked to a single website. You can create multiple sites and invite others to collaborate on pop-ups within each site.</p><h2>Installing script</h2><p>To connect your website to FlowsWave, you’ll need to add a snippet of code to your website's frontend. This code snippet can be found under your <strong>'Team Settings'</strong> and looks like this:<br>&nbsp;</p><blockquote><p>&lt;script src="https://cdn.flows.world/js/flowswave-1.0.min.js"&gt;&lt;/script&gt;<br>&lt;script&gt;<br>&nbsp;// Initialize the popup script<br>&nbsp;FlowsWave.init("https://api.flowswave.world");</p><p>&nbsp;// Start listening for broadcasted popups in site<br>&nbsp;FlowsWave.startListeningPopupsForSite("{{site_id}}");<br>&nbsp;<br>&nbsp;//... site login<br>&nbsp;<br>&nbsp;//post login: Start listening for popups directed to a user by supplying the {{userId}}<br>&nbsp;FlowsWave.startListeningPopupsForSite("{{site_id}}", "{{userId}}");<br>&lt;/script&gt;</p></blockquote><p>To make the most out of FlowsWave, you'll need to add a 'user ID' or 'session ID' to the last line of the script above. This enables you to send tailored messages from Flows directly to individual users.</p><blockquote><p><strong>Note</strong>: If you plan to include any sensitive information in your pop-ups, we recommend using a session ID in this field to prevent any potential risk of malicious users receiving messages intended for others.</p></blockquote><h2>Stopping FlowsWave</h2><p>If you'd like to stop listening to events coming from FlowsWave after you've starting listening then you can call the following function at any time to disable to library:</p><blockquote><p>stopListeningToPopupEvents({{flowsWaveSiteId}})</p></blockquote><h2>Connecting to Flows</h2><p>To connect your Wave site to Flows, go to <strong>'Team Settings'</strong> in the Flows App Panel and select <strong>FlowsWave</strong> from the left-hand menu.</p><figure class="image"><img src="https://cdn-assets.productfruits.com/4244e8d4-a4e6-47d1-a4d6-86d1f0d04327"></figure><p>Next, click '<strong>Link Site'. </strong>If you’re using the same user account for both Flows and FlowsWave, you'll be able to see your sites in the dropdown menu. Select the site to link to your team and click <strong>'Link'</strong>. Once linked, you can assign FlowsWave to one or more of your workspaces, allowing control over which workspaces can use Flows.</p><blockquote><p><strong>Note</strong>: If you’re not using the same user account for Flows and FlowsWave, you can still link your site by entering the API key from FlowsWave into the link site box.</p></blockquote><p>&nbsp;</p><p>&nbsp;</p>

<p>FlowsWave provides a set of predefined templates to help you get started quickly. When creating a new pop-up, you'll first see a screen like the one below, where you can choose a starting template. You can select a template that closely matches your desired pop-up, though you’ll have the option to fully customise it and redesign your pop-up in the next section of FlowsWave.</p><figure class="image"><img src="https://cdn-assets.productfruits.com/db432fbd-3ca6-450f-b740-7b348f93fd22"></figure><blockquote><p>If you don't find a good starting template or have a suggestion for additional formats please let us know and we can look into adding new templates that meet your requirements.</p></blockquote>

<p>After choosing a template you will be taken to the main pop-up editor page where you can customise the appearance and content of your pop-up.</p><figure class="image"><img src="https://cdn-assets.productfruits.com/7b3af5db-ab08-43a8-aedf-c5b40480f2bd"></figure><p>&nbsp;</p><p>The editor is a drag and drop editor. &nbsp;On the right hand side is a set of block components that you can drag onto the canvas and combine to complete your finalised pop-up. &nbsp;</p><h2>Language variations</h2><p>If you'd like to offer a pop-up in multiple languages, you can add additional languages through the language option. When setting a new language, a copy of the default language pop-up will be created, which can then be fully customised. Please note that each language version will be a completely separate pop-up.</p><p>A language variation will then be automatically delivered to users based on their browser’s preferred language settings.</p><figure class="image image_resized" style="width:50.97%;"><img src="https://cdn-assets.productfruits.com/09138e6f-4a7e-42a5-be78-4dc2245488fe"></figure><p>&nbsp;</p><p>&nbsp;</p><h2>Saving &amp; publishing</h2><p>Changes to your pop-up are automatically saved as a draft but do not go live immediately. Once you are satisfied with your pop-up, please click <strong>'Publish &amp; Enable'</strong> to make it live and ready for production deployment. From that point, you can trigger your pop-up as needed. If you wish to make further changes, you can continue editing, and your changes will again be saved in draft mode. Once ready, you’ll have the option to <strong>'Publish'</strong> the updates to push them live.</p>

<h2>&nbsp;</h2><h2>Push pop-up stage</h2><p>Once you've connected the main Flows Admin Panel to FlowsWave, you can start triggering pop-ups within any of your flows. This is accomplished through the 'push pop-up' stage, which you will find by adding a new stage and scrolling down to the FlowsWave options.</p><figure class="image"><img src="https://cdn-assets.productfruits.com/82c415f8-41f6-4123-b637-20dbdda5f7e6"></figure><p>Start by selecting a linked FlowsWave site and a pop-up from the first two dropdown menus. Flows automatically synchronises with FlowsWave and will show you all pop-ups that you can trigger. &nbsp;<br><br><img class="image_resized" style="width:79.69%;" src="https://cdn-assets.productfruits.com/c6ebf6ed-7bf3-4ad3-8110-40c2cef52503"></p><h2>Other fields</h2><h4><strong>Send to</strong></h4><p>The 'send to' field allows you to determine who the pop-up will be sent to. Please see a list of the different options below:</p><figure class="table"><table><tbody><tr><td><strong>All users</strong></td><td>Send to all users that are on the site</td></tr><tr><td><strong>All logged in</strong></td><td>Send to all users that are logged into the site only. &nbsp;This is determined by the calling script if a userId is passed</td></tr><tr><td><strong>All logged out</strong></td><td>Sent to all users that are not logged into the site only.</td></tr><tr><td><strong>Specific user(s)</strong></td><td>Send to a single user or a set of users. &nbsp;If this is selected a comma separate list of users IDs will need to be provided</td></tr></tbody></table></figure><h4>&nbsp;</h4><h4><strong>Variables</strong></h4><p>The variable section is used if you wish to pass dynamic data into you pop-up. In this section you can set one or more values by setting a <strong>'variable name'</strong> and it's value. You can reference variables in FlowsWave in the same way as the Flows Admin Panel by passing in the <strong>variable name</strong> within double curly brackets {{ }}.</p><p>Example:</p><figure class="image"><img src="https://cdn-assets.productfruits.com/ecafa5f7-89a1-474c-b6a7-91ab608ff859"></figure><figure class="image"><img src="https://cdn-assets.productfruits.com/f9164ee7-9bdd-4729-980e-2a049ef90bbd"></figure><p><strong>Response</strong><br>The response field indicates the name of the field that will be used for callbacks (if needed). See callbacks below for more information.</p><h4>&nbsp;</h4><p><strong>Callbacks</strong><br>FlowsWave also supports callbacks which allow you to continue your flow after the user has clicked on a button from the pop-up. The callback flow path is represented through the blue path. After successfully triggering a pop-up, the flow will first continue out the green path immediately while any callbacks will trigger the blue path. &nbsp;&nbsp;<br>⚠️ <i>Note:</i> For a callback to run, the flow must be enabled. Disabled flows will not execute any callback actions, even during testing.<br><img src="https://cdn-assets.productfruits.com/45901365-8a01-451f-a11c-a60e44c48374"></p><p><img class="image_resized" style="width:41.45%;" src="https://cdn-assets.productfruits.com/e1e96ea1-766f-47af-95a1-70f576014051"></p><p>To use the callback data within your flow, you must manually reference the variable defined in the <strong>Response name</strong> field.<br>For example, if you set the response name to <code>response</code> and your pop-up includes a button, you can access which button was clicked by referencing:</p><p><code>{{response.button}}</code></p><p>This allows Flows to recognise and process the button interaction triggered in FlowsWave.<br><img src="https://cdn-assets.productfruits.com/cb60b4bd-d4e2-4f23-9e1d-bf2ff266904f"></p><blockquote><p>Callbacks paths are valid for up to 24 hours after the pop-up stage has been executed</p></blockquote>

Go back to application

Was this article helpful?

You recently requested to reset your password for your account. Use the button below to reset it. This password reset is only valid for the next 24 hours.

If you’re having trouble with the button above, copy and paste the URL below into your web browser.

Flows Wave Help Center