Setup Snappy in FlutterFlow

Published on

Install Snappy in FlutterFlow

Adding Snappy to your FlutterFlow web projects gives your marketing team the ability to optimize and test without requiring developer intervention for each change.

Overview
  1. Understanding FlutterFlow and web integration
  2. Adding the Snappy script
  3. Verifying installation
  4. Troubleshooting

Understanding FlutterFlow and Web Integration

FlutterFlow primarily creates Flutter applications that can be compiled to various platforms including web. For Snappy to work with your FlutterFlow project:

  1. Your project must be deployed as a web application
  2. You'll need to use FlutterFlow's custom code integration features
  3. The script needs to be added to the HTML template used for web deployment

Adding the Snappy Script

To add Snappy to your FlutterFlow web project:

  1. Open your FlutterFlow project in the FlutterFlow editor
  2. Navigate to Settings (gear icon) in the left sidebar
  3. Select the Hosting & Deploy tab
  4. Under Web Configuration, look for the Custom Head Code section
  5. Add your Snappy script in this section:
<script src="https://scripts.letsbesnappy.com/YOUR_DOMAIN/admin.js"></script>
  1. Make sure to replace YOUR_DOMAIN with the domain the script should be installed on
  2. Click Save to apply your changes
  3. Re-deploy your web app for the changes to take effect

Alternative Method for Advanced Users

If you've exported your FlutterFlow project to code and are hosting it manually:

  1. Navigate to your project's web directory (typically /web folder)
  2. Open the index.html file
  3. Add your Snappy script in the <head> section, before the closing </head> tag:
<script src="https://scripts.letsbesnappy.com/YOUR_DOMAIN/admin.js"></script>
  1. Make sure to replace YOUR_DOMAIN with the domain the script should be installed on
  2. Save the file and re-deploy your web app

Verifying Installation

To confirm Snappy is working correctly on your FlutterFlow web app:

  1. Visit your published web application in a browser
  2. Right-click and select View Page Source
  3. Search (Ctrl+F or Cmd+F) for "letsbesnappy.com" - you should see your script in the head section
  4. Log in to your Snappy dashboard - your FlutterFlow site should appear as a connected site

Troubleshooting

If you're experiencing issues with your Snappy installation on FlutterFlow:

Script not appearing in source code

Flutter web apps are different from traditional websites, so:

  • Verify you've added the script to the correct location in settings
  • Ensure you've re-deployed your app after adding the script
  • Check that you're viewing the source of the deployed website, not the Flutter app preview

Limited functionality with Flutter web apps

Flutter web apps have a different DOM structure than traditional websites:

  1. Some Snappy features that rely on manipulating specific DOM elements may require custom configuration
  2. For best results, identify the key elements you want to modify with their Flutter-generated IDs
  3. Test your Snappy widgets thoroughly after installation

After FlutterFlow updates

When updating your FlutterFlow project:

  • Custom head code settings should persist through most updates
  • If the script disappears after a major FlutterFlow update, re-add it in the settings
  • For exported projects, ensure you maintain your custom code when pulling new updates from FlutterFlow

With Snappy successfully installed on your FlutterFlow web app, you're ready to start creating widgets, conducting A/B tests, and optimizing your site without waiting for development cycles.

Ready to transform your FlutterFlow web app? Login to your Snappy dashboard and begin creating your first optimization today!