Cloudflare Integration for Dynamic Number Insertion (DNI)

This guide shows you how to use Cloudflare Workers to power Dynamic Number Insertion (DNI) on your website. Instead of running extra JavaScript in each visitor’s browser, the number swap happens on Cloudflare’s servers (“at the edge”), near your users. This server-side approach keeps pages fast, reduces the code running in the browser, and delivers seamless, real‑time phone number updates across your site.

• Server-side solution: The work happens on our servers (in this case, Cloudflare Workers), not in the visitor’s browser. Visitors don’t need extra scripts to do the number swap.
  Processed at the edge: Cloudflare runs the logic on data centers geographically close to each visitor. That keeps it fast and reduces latency.
  Client-side performance: How quickly and smoothly a page loads and runs in the visitor’s browser. Offloading work to the server reduces the amount of JavaScript the browser has to execute.

How it Works:
API Token Setup

1. Enter an API Token in the field provided.
   Creating/accessing Cloudflare Worker API tokens: https://developers.cloudflare.com/fundamentals/api/get-started/create-token/
   
   The API token should be configured with the following permissions. 
2. Enter a Cloudflare Account ID in the field provided.

Cloudflare Worker Deployment - Deploy a Cloudflare Worker:

1. Using the deploy button in the top right, a CTM worker will be created in your Cloudflare account.
2. The worker manages dynamic number changes on your site.
3. Visit the Cloudflare Workers documentation for more info on workers.

Site Targeting:
Define Site Routes for your new CTM worker in Cloudflare. This allows you to control which site has DNI enabled via Workers Routes within your Cloudflare account.
For example, if your website were aicallspot.com, you would create a route to cover the whole website.
In Cloudflare, you would have a rule: *aicallspot.com/*

To set up a route in the Cloudflare dashboard:

1. Log in to the Cloudflare dashboard ↗ and select your account.
2. Go to Workers & Pages and select your CTM Worker in Overview.
3. Go to Settings > Domains & Routes > Add > Route.
4. Select the zone and enter the route pattern.
5. Select Add route.

Google Analytics Integration:

Set Google Analytics (GA4) Measurement ID
When using Zaraz you will want to set the default measurement ID here. If you are using multiple sites from this single account, you can use worker routes to adjust these variables dynamically for your different domains. Read more at https://developers.cloudflare.com/zaraz/faq/. 

Benefits:

1. Efficient Management: Handle dynamic content changes server-side, reducing client-side loading times.
2. Seamless Updates: Process requests at the edge for optimal performance.

For further assistance, please refer to the Cloudflare Workers documentation or contact our support team.