Contact Us

Table of Contents

Swapping Phone Numbers in Images

CallRail's dynamic number insertion feature is great for swapping phone numbers in your HTML, but what if the phone number is in an image? With a few small changes, you can swap images when you swap phone numbers.

Use this article to learn more about:

Swapping phone numbers in images

Getting Started

If you’re reading this, we’ll assume that dynamic number insertion is up and running for text numbers, and now you’d like to dynamically swap an image that contains a phone number.

Supported Image Placements

CSS: Dynamic image replacement supports images that are loaded via CSS. To use dynamic image replacement with images loaded via CSS, you must add the class "cr_image" to the element that contains the targeted image.

Supported File Types

All common image formats can be swapped, including gif, jpg, and png.

Set up Image Swapping

For this example, assume that header.gif is the name of an image that contains your destination phone number.

Locate the images containing your phone number.

If you are using images loaded via CSS, add the class "cr_image" to the element that contains the targeted image.

Rename your image so that it contains your destination phone number in the file name.

Example: If your phone number is 555-444-3333, copy the image to header.5554443333.gif

Using an image editor, create a new image for each tracking phone number. Save the image and follow the same naming convention. The file type must be the same for all images.

For example, if your tracking numbers are 555-111-2222 and 555-111-3333, create header.5551112222.gif and header.5551113333.gif