How do I setup dynamic number insertion?

Read this whole article before installing. Always add the script in staging first, confirm it behaves correctly, then publish to the live site.

On this page

1. What's different from the old script
2. 1. Preparation
3. 2. Identify the phone number(s)
4. 3. Open the WebFlow custom code settings
5. 4. Add the script and config
6. 5. Config field reference
7. 6. Testing
8. 7. Troubleshooting
9. 8. Maintenance

—What's different from the old script

The old DNI script is retired. The new one does the same job — swap the displayed number for ad-attributed visitors — but it's simpler to install and covers more cases automatically. If you've installed the old version before, here's what changed:

Old script

• Whole script pasted into custom code, one copy per site
• Only detected Google Ads, via a custom ?network=g parameter
• Single & multi-location used two different code blocks
• Phone number format had to match exactly, or replacement could fail
• Tracking flag never expired once set

New script

• One hosted script + a short config block, same for every site
• Reads standard utm_source — Google, Facebook, or any channel you define
• Single & multi-location use the identical setup, just a longer config
• Matches parens, dashes, dots, or bare digits automatically
• Attribution expires after a config-set window, then falls back to the default number

01Preparation

If you're unsure about anything below, contact the technology team before publishing to a live site.

• Understand the goal: when a visitor arrives with a recognized utm_source value in the URL (for example ?utm_source=google), the script swaps every occurrence of the site's phone number for that channel's call-tracking number — and keeps showing it on later pages, for a limited time.
• What you'll need:
  • Access to WebFlow for the site.
  • The site's current phone number(s).
  • The call-tracking number for each channel you want to track (Google, Facebook, etc.), from your call-tracking platform.

02Identify the phone number(s) on the site

Before installing, note every place the phone number appears:

• In text — anywhere the number is printed on the page, in any format.
• In tel: links — clickable numbers such as href="tel:9549724208".

You no longer need to standardize formatting first. The new script recognizes (954) 972-4208, 954-972-4208, 954.972.4208, 9549724208, and versions with a leading 1 or +1 — all as the same number. Whatever format each instance is already in, that's the format it stays in after swapping.

If the site has more than one location, note which number belongs to which office — you'll list each one separately in the config.

03Open the WebFlow custom code settings

1. Log in to WebFlowand open the site's project.
2. Decide the scope.For a single page, open that page'sSettings(gear icon) from the Pages panel. For the whole site, go toProject Settings → Custom Codeinstead.
3. Find the footer field.You'll paste the install snippet intoBefore </body> tag(page-level) or theFooter Codesection (site-wide).

04Add the script and config

Unlike the old script, you're not pasting in the whole program — the script itself is hosted and shared across every site. You only add a small config block, then load the script:

Single-location site

Before </body> tag

<script>
  window.DNS_CONFIG = {
    expirationDays: 30,
    groups: [
      {
        name: "Main",
        defaultNumber: "(000) 111-2222",
        utmMap: {
          google: "(000) 333-4444",
          facebook: "(000) 555-6666"
        }
      }
    ]
  };
</script>
<script src="https://dni-script.dentalmarketing.com/dynamic-number-swap.js"></script>

• defaultNumber — the number currently on the site.
• utmMap — one entry per channel you want to track. The key is the utm_source value from your ad URLs (lowercase); the value is that channel's call-tracking number.

Multi-location site

Add one object to groups per office. Everything else about the install is identical:

Before </body> tag

<script>
  window.DNS_CONFIG = {
    expirationDays: 30,
    groups: [
      {
        name: "Miami",
        defaultNumber: "(111) 111-1111",
        utmMap: {
          google: "(222) 222-2222",
          facebook: "(333) 333-3333"
        }
      },
      {
        name: "Tampa",
        defaultNumber: "(444) 444-4444",
        utmMap: {
          google: "(555) 555-5555",
          facebook: "(666) 666-6666"
        }
      },
      {
        name: "Orlando",
        defaultNumber: "(777) 777-7777",
        utmMap: {
          google: "(888) 888-8888"
        }
      }
    ]
  };
</script>
<script src="https://dni-script.dentalmarketing.com/dynamic-number-swap.js"></script> 

Every visitor's channel applies to every location at once. If someone arrives via ?utm_source=google, Miami's number swaps to Miami's Google number and Tampa's swaps to Tampa's Google number, in the same page load. You don't need separate logic per office — the script matches each location's own current number on the page and looks up the right replacement for it.

A location doesn't need a mapping for every channel — Orlando above only tracks Google. Any channel without an entry just keeps showing that location's defaultNumber.

05Config field reference

06Testing

1. Test with a tracked URL.Open the page with ?utm_source=google appended (e.g. https://www.example.com/?utm_source=google) and confirm every visible instance of the number changes, in whatever format it was already in — and that any tel: links update too.
2. Test page navigation.Click through to other pages on the site and confirm the tracking number keeps showing, without the parameter in the URL.
3. Test with no parameter.Open the site fresh (or in a private window) with no utm_source at all, and confirm the original number is shown.
4. Test each channel you configured(?utm_source=facebook, etc.) the same way.

07Troubleshooting

Number isn't swapping

• Open the browser console and look for a warning starting with [dynamic-number-swap] — it names exactly what's wrong with the config (a missing field, a bad number, a duplicate location name).
• Confirm the config <script> block comes before the <script src="...dynamic-number-swap.js"> tag — the config has to exist before the script reads it.
• Confirm the utm_source value in the URL matches a key in that location's utmMap exactly (matching is case-insensitive, but the source still has to be one you configured).
• Confirm defaultNumber matches what's actually printed on the page — the script only swaps numbers it can find.

Right location swaps, wrong number appears

• Check for two groups with the same name — the script will refuse to run and warn in the console rather than guess which one you meant.

Changes not visible

• Clear your cache or use a private window to make sure you're viewing the published version.
• Confirm you clicked Publish in WebFlow, not just Save.

08Maintenance

Adding a location

Add a new object to the groups array, following the same shape as the others. Separate it from the previous entry with a comma, and give it a name no other group on the site is using.

Removing a location

Delete its entire object, from the opening { to the closing }. If it wasn't the last entry in the array, remove the trailing comma too.

Updating a number

Edit the relevant defaultNumber or utmMap value in place, then re-publish. No other part of the config needs to change.