Go to rebrand

Phone Provider

This is a script that will replace all the brands' default phone numbers (CTA texts and href attributes) for the ones provide by Invoca.

How to use

Implementation

You can import the PhoneProvide source module into your JS:

import PhoneProvider from '@consumeraffairs/ca-styleguide/modules/ca_styleguide_phone_provider.es6'; const phoneProvider = new PhoneProvider(channel, city); phoneProvider.init();

Also, you can include the files below, or their content, into your page and use it via the window.CAPhoneProvider variable.

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_phone_provider.css') }}" /> <script defer src="{{ static("js/ca_styleguide_phone_provider.js") }}"></script> window.addEventListener('load', () => { const phoneProvider = new window.CAPhoneProvider(channel, city); phoneProvider.init(); });

By default, if no channel parameter is passed as an argument, it will fallback to "CA". Other values accepted for channel:

  • Direct Message: DM
  • Main Site: CA
  • Matching Tool: MT
  • Publishing Partners: PP
  • RetirementLiving: RL
  • Silverback: MY
  • Social: SOCIAL
  • TV: TV

By default, if no city parameter is passed as an argument, it will fallback to "". This value is just passed to the BE and has no real impact on the FE. The FE will accept either of the optional formats in the response.

The result object can be either one of the following:

{ "status": "success", "formattedNumber": "855-341-2706", "invocaId": "i-c88d04a2-6816-464e-a73d-e47bd0835a93", "countryCode": "1", "campaignId": "16416", "brandId": "10924", "nationalNumber": "8553412706", "requestId": "496785", "overflow": null, "surge": null, "lifetimeInSeconds": 300 } { "status": "success", "campaignId": "16416", "promo_number": "+19185504373", "lifetime_seconds": 300, "request_id": "496785", "brandId": "10924", "promo_number_formatted": "918-550-4373", "tracking_url": "https://consumeraffairsinc.ringrevenue.com/c/1543/496785--15382445?us=https%3A%2F%2Fwww.consumeraffairs.com%2Fautomotive%2Fhunting-valley-truck-sales.html%3FPPCPN%3D" }

Besides calling the phoneProvider.init(scope) method, this logic can also be initialized dispatching the com.consumeraffairs.styleguide.phoneprovider.init event. The event should be dispatched with the scope of where this functionality should run in its detail key. Example: const scope = document.querySelector('.scopeClass'); const evtData = { detail: { scope }}; const phoneProviderEvt = new CustomEvent('com.consumeraffairs.styleguide.phoneprovider.init', evtData); window.dispatchEvent(phoneProviderEvt);

To test it locally, you'll need to download and activate the "Allow-Control-Allow-Origin: *" Chrome Extension, run the Main Site locally and change the last return of the formattedURL() method to point to your localhost.

HTML Requirements

The element to be replaced with the new phone number should contain the class js-phone-provider and the `data-telephone= attribute with the campaign id from the brand to be processed.

Replace a partial text

If you have a case where you want to replace only a partial part of the inner element processed, you can use the class js-friendly-number to wrap the phone number, in this way the script will only replace the content inside of the class previously mentioned and will leave everything outside of it intact.

Avoid replacing visual text if not necessary

To avoid replacing the text to show with the new telephone number you can add the class js-phone-no-replace to the element containing the data-telephone, the script will check if the current element to replace contains that class, if it is the case it will avoid replacing and it will jump over to the next element.

Example

Insert a valid campaign ID for the 'CA' channel, and click on the button bellow to replace the phone number.

Default Phone Number: (866) 923-3426

Number after Invoca call on page load to campaign ID 24767:

(866) 923-3426


    Number after Invoca call from input in the form:

    (866) 923-3426