Omacro
Book a Demo
Help Center

omacro.com

Dealer Locator

Distributor locator website code implementation

Implement the Omacro distributor locator via popup or embedded on-page rendering.

Step 1: Include script within website

The example below demonstrates what's needed to integrate the Distributor Locator widget with your site. Simply update desired parameters then copy the snippet into your website.

  1. <script id="omacro-widget-buynow" src="https://buynow.omacro.com/embedded/bn.loader.js?company=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX&country=auto&validate=false&debug=false" async></script>

All snippet parameters are appended to the script source and must conform to the standards of uniform resource identifiers.

company required

This is your Omacro supplied company identifier. This ID was assigned when your company account was originally created which will never change. The snippet example above already includes your company identifier.

country

This is a two digit ISO country code ISO 3166-1 alpha-2 code or auto. If not supplied a map will be presented to allow the user to select their country. When provided and not set to auto the user is immediately presented results for the specified country. When set to auto the country will be automatically determined by the users IP Address.

validate

When true the snippet will verify that that each product identifiers available on the page is valid and returns a product. Once validation is complete the snippet will add the respective CSS class to the trigger element: obn-validate-pass or obn-validate-fail. While validation is pending the trigger element will have the CSS class obn-validate-pending.

debug

When true the snippet will assist with debugging by logging all activity and notifications to your browser console. It's recommended to disable this feature once debugging is complete.

Step 2: Choose way you wish to implement the Distributor Locator.

Option 1: Triggered via button click to open a model popup window.

Step 1: To trigger the popup window, we'll first need to modify our script path in Step 1 and add an additional parameter called "mode" with a value of "distributor". See example below:
  1. <script id="omacro-widget-buynow" src="https://buynow.omacro.com/embedded/bn.loader.js?company=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX&country=auto&validate=false&debug=false &mode=distributor " async></script>
Step 1: Assign trigger to buttons.
The example below demonstrates a simple anchor tag (link) being used as a button trigger. You can easily use existing, or new elements, on your website by simply adding the required parameter.
  1. <a href="#obn" data-product="*">Find A Distributor</a>

Trigger parameters take priority over snippet parameters, this allows for parameters to be set globally with exceptions if needed. All trigger parameters are HTML data attributes which require they start with ' data- '.

product required

This is the product identifier and should be set to "*".

Option 2: Embedded within website page.

You can embed the locator directly on to a page. Assuming you have gone through the steps of adding omacro's buy now code snippets to your page, use the following example to render the locator within the page itself.

Step 1: Add CSS Class to the Page.
 Ensure you have an element on the page with the class name of "oma-omacro".
  1. <div class="oma-omacro"></div>
Step 2: Add JavaScript to the Page
Add the following script to the page anywhere below the HTML element mentioned in Step 1 . The script is designed to trigger the render function within the Distributor Locator script. This script loads the widget once page loads rather than via a button click.
  1. <script>
  2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.showDistributors();
  5. }, false)
  6. </script>
Step 3 : Add Cascading Style Sheet to the Page
Add the following CSS (modify as needed) to adjust the style of the Distributor Locator content so that it properly renders within the page document.
  1. <style type="text/css">
  2. body.oma-modal-in {
  3. overflow: auto !important;
  4. }
  5. .oma-omacro .oma-buynow {
  6. opacity: 1 !important;
  7. display: block !important;
  8. position: relative !important;
  9. top: auto !important;
  10. right: auto !important;
  11. bottom: auto !important;
  12. left: auto !important;
  13. }
  14. .oma-omacro .oma-buynow .oma-dialog {
  15. transform: none !important;
  16. transition: none !important;
  17. left: auto !important;
  18. margin-right: auto !important;
  19. margin-left: auto !important;
  20. }
  21. .oma-omacro .oma-buynow .oma-dialog .oma-content {
  22. box-shadow: none !important;
  23. background-color: transparent;
  24. }
  25. .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
  26. display: none;
  27. }
  28. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-close {
  29. display: none;
  30. }
  31. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs {
  32. border-bottom-color: #ddd;
  33. background-color: transparent;
  34. }
  35. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a {
  36. color: #337ab7;
  37. background-color: transparent;
  38. }
  39. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a:focus,
  40. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a:hover {
  41. text-decoration: none;
  42. background-color: #eee;
  43. border-color: #eee #eee #ddd;
  44. }
  45. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a,
  46. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a:focus,
  47. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a:hover {
  48. color: #555;
  49. cursor: default;
  50. background-color: #fff;
  51. border: 1px solid #ddd;
  52. border-bottom-color: transparent;
  53. }
  54. .oma-omacro .oma-buynow .oma-footer {
  55. border-top-color: transparent;
  56. background-color: transparent;
  57. }
  58. .oma-omacro .oma-backdrop {
  59. display: none !important;
  60. }
  61. </style>