This guide contains real working examples, code snippets, and documentation for the EDDM Map. Using the EDDM map requires the following input data:

-oAuth Access Token

-Delivery Date

-Product & Option UUID’s

Obtain an oAuth Access Token

https://api.4over.com/oauth/v2/token?client_id= + client_id + &client_secret= + client_secret + &grant_type=client_credentials

Select your desired delivery date with the following API route:

https://api.4over.com/dates?&eddm=true&access_token= + access_token

Get EDDM product options:

https://api.4over.com/printproducts/products/ + product_uuid + ?validators=true&product_uuid= + product_uuid + &access_token= + access_token

Add the map iFrame to your website:

<iframe id="eddmIframe" src="https://EDDMeasy.com" height="800" width="100%"></iframe>

Start the EDDM Map

Start the EDDM Map using the HTML5 PostMessage API:

Replace ‘ACCESS_TOKEN’ of the javascript section with your generated oAuth token.

var domain = 'https://EDDMeasy.com';
var iframe = document.getElementById('eddmIframe').contentWindow;

var data = {
  type: 'eddm_start',
  access_token: ACCESS_TOKEN,
  date: '2025-12-30', // format: yyyy-mm-dd
  product_uuid: ...,
  product_options: ..., // format: &options[]=UUID&options[]=UUID...
  map_event_data: ..., // optional: loads the map back to prexisting state based on selected routes
  product_name: 'Custom Product Name', // optional
  next_button_text: 'Custom Button Text', // optional
  show_eddm_service_price: ..., // format: boolean
  postage_markup_percentage: 0, // optional
  product_markup_percentage: 0, // optional
  // Markup EDDM service cost at any quantity
  eddm_service_cost_smoothing: [{ '250': 20 }, { '325': 22 }, { '475': 30 }, ...] // format: array of objects, optional: minimum runsize/percentage markup
  eddm_service_markup_percentage: 0, // format: number, optional: markup eddm service price by percentage,
  show_outputted_map_data: ..., // format: boolean, optional: shows detailed map data with route coordinates
};

iframe.postMessage(data, domain);

Additional Post Message Options

Send these messages to update the map while its running.

Update next button text:

var data = {
	type: 'next_button_text_update',
	next_button_text: 'Custom Button Text'
};
iframe.postMessage(data, domain);

Events

Messages contain map data sent through HTML5 PostMessage API from the EDDM map. These messages contain all the necessary info needed to order the selected EDDM Map product.

Listen to the native ‘message’ event for output data coming from the EDDM Map:

window.addEventListener('message', function(event) {
	// If 'message' didn't come from the EDDM Map, do nothing
	if (event.origin !== ('https://EDDMeasy.com')) { return; };
	// Do something with event.data
	handleMessage(event.data);
});