Implement the 'Near Me' 360 widget

Last updated on July 25th, 2022

The 'Near Me' 360 widget enables to embed on any website page (in the HTML file) the 'Near Me' 360 tool, which allows brands to measure the 'near me' business performance of their locations against their local competition.

Widget

The widget's HTML code consists of 2 elements:

  • a <script> tag
  • 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 'Near Me' 360 widget can be customized with the following attributes:

Data attribute Mandatory Description Default
id X The value is: uberall-near-me-check.
The id is representing the element's identifier. It cannot be changed in order to execute the 'Near Me' 360 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')
The current supported languages are: English ('en'), German ('de') and French ('fr').
en
data-countries
Location countries which the tool should support (both in the Google connect flow and in the manual form)
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-cta-url-location-accuracy
Url link in Online Presencp section on results page
Format: url
uberall.com
data-cta-url-engagement
Url link in Customer Reviews section on results page
Format: url
uberall.com
data-cta-url-conversions
Url link in Conversions section on results page
Format: url
uberall.com
data-cta-url-search-optimization
Url link in Search Visibility section on results page
Format: url
uberall.com
data-cta-url-results-footer
Url for CTA in footer on results page
Format: url
uberall.com
data-hide-uberall-attribution
Boolean to hide the "Powered by Uberall" attribution.
Format: boolean (true to hide it, false to show it)
false
data-hide-location-accuracy

Boolean to hide the Online Presence section on results page
Format: boolean (true to hide it, false to show it)
false
data-hide-search-optimization

Boolean to hide the Search Visibility section on results page
Format: boolean (true to hide it, false to show it)
false
data-hide-conversions

Boolean to hide the Conversions section on results page
Format: boolean (true to hide it, false to show it)
false
data-hide-engagement

Boolean to hide the Customer Reviews section on results page
Format: boolean (true to hide it, false to show it)
false
data-hide-summary

Boolean to hide the Summary section on multi-location results page
Format: boolean (true to hide it, false to show it)
false
data-hide-conclusion

Boolean to hide the Conclusion section on multi-location results page
Format: boolean (true to hide it, false to show it)
false

A fully customized 'Near Me' 360 widget would 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"
            data-language="EN"
            data-countries="US,FR"
            data-title="This is the title"
            data-subtitle="This is a long subtitle - lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
            data-color-button-background="#3877E0"
            data-color-success="#36D7A6"
            data-color-failure="#F43737"
            data-cta-url-location-accuracy="https://uberall.com/en-gb/resources/blog/why-citation-building-is-key-for-your-local-search-rankings"
            data-cta-url-engagement="https://uberall.com/en-gb/resources/blog/study-review-star-rating-rise-foot-traffic"
            data-cta-url-conversions="https://uberall.com/en-gb/resources/blog/branded-vs-unbranded-search-global-brand-report"
            data-cta-url-search-optimization="https://uberall.com/en-gb/resources/blog/why-citation-building-is-key-for-your-local-search-rankings"
            data-cta-url-results-footer="https://uberall.com/en-gb/near-me-360/contact-us"
            >
        </div>

You can use services like JSFiddle to preview customizations in an HTML environment: e.g. preview here

Was this article helpful?

Save as PDF