How do I set up Dynamic Number Insertion (DNI)?

—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:

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".

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 WebFlow and open the site's project.
2. Decide the scope. For a single page, open that page's Settings (gear icon) from the Pages panel. For the whole site, go to Project Settings → Custom Code instead.
3. Find the footer field. You'll paste the install snippet into Before </body> tag (page-level) or the Footer Code section (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

<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:

<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>

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.