Near Me 360 - External Guide for whitelabel

+ More

Table of Contents

Widget Customization Brand Appearance Customization Color customization Typography Image customization Code examples Basic widget (minimal setup) Full brand customization (all new options)

The widget's HTML code consists of two elements: a <script> tag and a <div> tag. Both must be added in the HTML code of the designated website page.

Together they look like this:

<script src="https://static-near-me-check.uberall.com/app.js"></script>
<div
    id="uberall-near-me-check"
    data-public-key="abc"
    >
</div>

Customization

The Hybrid CX Health Check (formerly 'Near Me' 360) widget can be customized and/or white-labelled with the following attributes.

⚠️ Rows marked NEW were added as part of brand appearance customization.

Data attribute	Mandatory	Description	Default
`id`	X	The value is: `uberall-near-me-check`. The id represents the element's identifier. It cannot be changed in order to execute the widget on the website.	-
`data-public-key`	X	Uberall public API key. The customer can retrieve it in the platform, in the top dropdown menu under "API keys".	-
`data-language`		Language in which the tool is displayed. Format: one language code (e.g. 'fr'). Supported languages: English ('en'), German ('de'), French ('fr'), Italian ('it'), Spanish ('es'), and Japanese ('ja').	en
`data-countries`		Location countries which the tool should support. Format: comma-separated two-letter country codes (e.g. 'US,FR'). Currently all countries are supported.	All countries
`data-title`		Title on the start page of the tool. Format: text.	Uberall's title
`data-subtitle`		Subtitle on the start page of the tool. Format: text.	Uberall's subtitle
`data-color-button-background`		Button background color. Format: any valid CSS color (e.g. #3877E0).	Uberall's color
`data-color-success`		Color for success states. Format: any valid CSS color (e.g. #3877E0).	Uberall's color
`data-color-failure`		Color for failure states. Format: any valid CSS color (e.g. #3877E0).	Uberall's color
`data-main-background-color` 🟢 NEW		Main background color of the widget. Format: any valid CSS color (e.g. #FFFFFF).	#FFFFFF
`data-secondary-background-color` 🟢 NEW		Background color for secondary sections. Format: any valid CSS color (e.g. #F6F9FD).	#F6F9FD
`data-text-color` 🟢 NEW		Primary text color throughout the widget. Format: any valid CSS color (e.g. #151A20).	#151A20
`data-font-family` 🟢 NEW		Custom font family for body text. Format: CSS font-family string (e.g. 'Roboto', Arial, sans-serif).	IBM Plex Sans
`data-start-page-hero-desktop` 🟢 NEW		Hero image displayed on the start page (desktop). Format: URL.	Default image
`data-start-page-hero-mobile` 🟢 NEW		Hero image displayed on the start page (mobile). Format: URL.	Default image
`data-results-header-desktop` 🟢 NEW		Header image displayed on the results page (desktop). Format: URL.	Default image
`data-results-header-mobile` 🟢 NEW		Header image displayed on the results page (mobile). Format: URL.	Default image
`data-results-footer-desktop` 🟢 NEW		Footer image displayed on the results page. Format: URL.	Default image
`data-cta-url-location-accuracy`		URL link in Online Presence section on results page. Format: url. *The URL component of the section will be removed if the attribute's value is not set.	-
`data-cta-url-engagement`		URL link in Customer Reviews section on results page. Format: url. *The URL component of the section will be removed if the attribute's value is not set.	-
`data-cta-url-conversions`		URL link in Conversions section on results page. Format: url. *The URL component of the section will be removed if the attribute's value is not set.	-
`data-cta-url-search-optimization`		URL link in Search Visibility section on results page. Format: url. *The URL component of the section will be removed if the attribute's value is not set.	-
`data-cta-url-results-footer`		URL for CTA in footer on results page. Format: url. *The footer CTA button will be removed if the attribute's value is not set.	-
`data-hide-uberall-attribution`		Boolean to hide the "Powered by Uberall" attribution. Format: boolean (true to hide, false to show).	false
`data-hide-google-connect-flow`		Boolean to hide the Google Connect button from start and results pages. Format: boolean (true to hide, false to show).	false
`data-hide-global-score`		Boolean to hide the score on the top of the single location results page. Format: boolean (true to hide, false to show).	false
`data-hide-location-accuracy`		Boolean to hide the Online Presence section on results page. Format: boolean (true to hide, false to show).	false
`data-hide-search-optimization`		Boolean to hide the Search Visibility section on results page. Format: boolean (true to hide, false to show).	false
`data-hide-conversions`		Boolean to hide the Conversions section on results page. Format: boolean (true to hide, false to show).	false
`data-hide-engagement`		Boolean to hide the Customer Reviews section on results page. Format: boolean (true to hide, false to show).	false
`data-hide-reply-rate`		Boolean to hide the reply rate data (doughnut charts and text) from the customer reviews section. Format: boolean (true to hide, false to show).	false
`data-position-listings-details`		A numerical value to indicate in which position the listing details section will be displayed. Format: number (1, 2, 3, 4).	Last section before the footer
`data-hide-listings-details`		Boolean to hide the Listing Details section on the results page. Format: boolean (true to hide, false to show).	false
`data-hide-results-footer`		Boolean to hide the Footer section on the results page. Format: boolean (true to hide, false to show).	false
`data-hide-summary`		Boolean to hide the Summary section on multi-location results page. Format: boolean (true to hide, false to show).	false
`data-hide-conclusion`		Boolean to hide the Conclusion section on multi-location results page. Format: boolean (true to hide, false to show).	false
`data-email-field-visibility`		Controls the lead email input field. Possible values: `optional`, `mandatory`, `hidden`.	hidden
`data-phone-number-field-visibility`		Controls the phone number input field. When exposed and filled, the phone number is used as an additional search criterion. Possible values: `optional`, `mandatory`, `hidden`.	hidden
`data-print-report-enabled`		Adds a button allowing users to print the report as a PDF. Format: boolean (true to show, false to hide).	hidden
`data-white-label-print-report-logo`		Adds a logo to the PDF report to align with brand guidelines. Format: url.	-
`data-privacy-policy-url`		Sets the link used for the privacy policy throughout the report. Format: URL.	No link
`data-show-unchecked-directories`		Adds a section that elaborates on directories that are not scannable.	hidden
`data-hide-managed-locations-details`		Hides the report detail if a managed location is searched, and shows a different header message indicating the location is managed.	false
`data-report-name`		Changes the report name in all areas it appears, including email.	Hybrid CX Health Check

Brand Appearance Customization

Partners that implement the NM360 check can now fully customize the widget's appearance to align it with their brand. Nine new data attributes have been added, in three groups:

Color customization

data-main-background-color — Main background color of the widget (default: #FFFFFF)
data-secondary-background-color — Background color for secondary sections (default: #F6F9FD)
data-text-color — Primary text color (default: #151A20)

Typography

data-font-family — Custom font family for body text (default: IBM Plex Sans)

Image customization

data-start-page-hero-desktop — Hero image on the start page, desktop (default: built-in image)
data-start-page-hero-mobile — Hero image on the start page, mobile (default: built-in image)
data-results-header-desktop — Header image on the results page, desktop (default: built-in image)
data-results-header-mobile — Header image on the results page, mobile (default: built-in image)
data-results-footer-desktop — Footer image on the results page (default: built-in image)

Code examples

<script src="https://static-near-me-check.uberall.com/app.js"></script>
<div
    id="uberall-near-me-check"
    data-public-key="YOUR_PUBLIC_KEY"
    >
</div>

Full brand customization (all new options)

<script src="https://static-near-me-check.uberall.com/app.js"></script>
<div
    id="uberall-near-me-check"
    data-public-key="YOUR_PUBLIC_KEY"
    data-language="en"
    data-countries="US,FR"
    data-title="Check your local presence"
    data-subtitle="See how your business appears across the web."
    data-color-button-background="#7515F5"
    data-color-success="#36D7A6"
    data-color-failure="#F43737"
    data-main-background-color="#FFFFFF"
    data-secondary-background-color="#F9FAFB"
    data-text-color="#1A202C"
    data-font-family="'Roboto', Arial, sans-serif"
    data-start-page-hero-desktop="https://cdn.example.com/hero-desktop.jpg"
    data-start-page-hero-mobile="https://cdn.example.com/hero-mobile.jpg"
    data-results-header-desktop="https://cdn.example.com/results-header.jpg"
    data-results-header-mobile="https://cdn.example.com/results-header-mobile.jpg"
    data-results-footer-desktop="https://cdn.example.com/results-footer.jpg"
    data-cta-url-location-accuracy="https://uberall.com/en-gb/resources/blog/..."
    data-cta-url-engagement="https://uberall.com/en-gb/resources/blog/..."
    data-cta-url-results-footer="https://uberall.com/en-gb/near-me-360/contact-us"
    data-hide-uberall-attribution="false"
    >
</div>

You can use services like JSFiddle to preview customizations in an HTML environment.

overview proximity

Near Me 360 - External Guide for whitelabel

Contact Us

Widget