Loamly Documentation

Webflow provides a simple way to add custom code to your site. This guide walks you through adding Loamly tracking to any Webflow project.

Add the tracking script

Open your Webflow project in the Designer
Click the Settings icon (gear) in the left sidebar
Go to Custom Code tab
In the Head Code section, paste the following:

<script
  src="https://app.loamly.ai/t.js?d=yourdomain.com"
  defer
></script>

Replace yourdomain.com with your actual domain
Click Save Changes
Publish your site to apply the changes

Custom domains

If you use a custom domain, use that domain in the script. If you are using a Webflow subdomain (yoursite.webflow.io), use that instead.

Verify installation

Wait for your site to finish publishing
Visit your published Webflow site in a new browser tab
Open your Loamly dashboard
Check the real-time visitors section
Your visit should appear within seconds

Troubleshooting

Not seeing visits? Make sure the site is published and you are viewing the live version, not the Designer preview
Wrong domain? Ensure the domain in your script matches exactly (no www vs non-www mismatch)
Ad blocker? Try disabling ad blockers temporarily to verify

Track Webflow forms

Loamly automatically tracks all Webflow form submissions. No additional configuration is needed. When a visitor submits a form, you will see:

The form name
Submitted field values
Timestamp
The visitor record it is attributed to

Automatic form tracking

Form submissions appear in the Attribution page linked to the visitor who submitted them. Filter by conversion status to find all converters.

Custom events

To track custom events beyond page views and form submissions, you can use Webflow interactions with custom code:

Using an embed element

Add an Embed element where you want to track an event
Add the following code:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Track when a specific section is viewed
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        window.loamly?.event('section_viewed', {
          section: 'pricing'
        });
        observer.disconnect();
      }
    });
  });
  
  const target = document.querySelector('#pricing-section');
  if (target) observer.observe(target);
});
</script>

Using interactions

For button clicks and other interactions, add custom code to your button's link settings or use a separate Embed element:

<script>
document.querySelector('.cta-button').addEventListener('click', function() {
  window.loamly?.event('cta_clicked', {
    button: 'hero_signup',
    page: window.location.pathname
  });
});
</script>