Advanced JS Integration

The Ringba JavaScript tag is asynchronous. This means it runs silently in the background, not affecting page loads, and displays numbers from your pool as they’re retrieved from our servers. Typically this happens in 100 milliseconds or less depending on the speed of the user’s internet connection.

For most pages integration is easy, you paste the JS where you want your number to display and you’re done. However, if you page needs the phone number pushed into a JavaScript variable you will need to use something similar to the first example below.

Note: You can copy and use the below code example, but you must replace the “ringba_com_tag” variable with your Campaign ID inside Ringba otherwise it won’t work.

If you’re not an advanced JavaScript developer this tag may look intimidating so let’s break it down step by step.

The first function is triggered by the Ringba tag when the server returns the phone number, and places the number into a global JavaScript variable called “window.pnumber”.

This allows you to use this variable to display the phone number anywhere you’d like with JavaScript. For example, if you wanted to write the phone number to your website using JavaScript you could use document.write.

If you want to style the phone number to match your page using this method, you would put the phone number inside of a div, span or other tag and use CSS. This example shows you how place the phone number in bold text on your page.

The “window.pnumber” variable can be used in any type of JavaScript function that is required for your page. Here is an example of using the variable in an alert tag.

Ringba tags also have a built in function to populate your page with phone numbers by inserting them into HTML tags with a specific class name.

You can see in the below example that the “numberClass” function is set to “phNumber”. This means Ringba will insert the properly formatted number into any tag that has the class name set to “phNumber”. (You can change this class name to whatever you’d like in the Ringba tag.)

Let’s say we want the phone number to display in 2 seconds of the website. Instead of using JavaScript or pasting the code repeatedly throughout the page, we’ll use the number replacement function.

When the above page loads, Ringba will insert the phone number into all of your “phNumber” spans, formatted using your campaign settings.

The end result would look something like:

Hey thanks for visiting our really cool website. If you have any questions please give us a call toll free at (800) 222-3344 and one of our team members will be happy to help.

Address: 123 Main Street, New York, NY 10001
Phone: (800) 222-3344

Finally we’ll tie it all together with a fully commented example that uses both types of implementation. If you have any questions, please feel free to reach out to us by clicking the chat icon.

 

 

Request Information

Find out how Ringba can help scale your campaigns and save you money on call fees.

  Chat with a Live Sales Expert
Request Demo Free Trial Request Information