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',
  apiUrl: 'https://api.4over.com',
  access_token: ACCESS_TOKEN,
  date: '2025-12-30', // format: yyyy-mm-dd
  origin: 'https://test.example.com', //Your Site URL, where you want to use this iframe
  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);
});

Note: At the time of EDDM order placement, verify that the in-mailbox date associated with the route group is still within the valid range. If the date is no longer valid, call the /dates API to retrieve the available dates and update the route group’s in-mailbox date with a valid one before placing the order.

Scenario:
Let’s suppose When the route group was created, 2026-06-15 was a valid delivery date and was returned by the Dates API. However, by the time the customer completed checkout and the order was submitted, 2026-06-15 was no longer returned by the Dates API, making the selected delivery date invalid.

To avoid this issue, the delivery date should always be revalidated immediately before placing the eddm order.