Skip to content

Embed API

The Embed API allows you to integrate the yio-map component on external websites, displaying your coverage data to visitors.

Overview

With the Embed API, you can:

  • Display coverage hexagons and access nodes on your company website
  • Let visitors search addresses to check coverage availability

Generating an Embed Code

Navigate to Integrations > Embed API in the portal sidebar.

Feature not visible?

If you don't see the Embed API option in your sidebar, this feature may not be enabled for your account. Contact support@yio.at to request access.

  1. Enter the Allowed Domain where the map will be embedded (e.g., https://yourcompany.com)
  2. Select the Tileset to display
  3. Click Generate Embed

The generated HTML snippet and a live preview will appear below the form.

Token Expiration

Embed tokens are valid for 1 year. You will need to generate a new embed code annually and update your website accordingly.

Using the Embed Code

Copy the generated snippet and paste it into your website's HTML:

<yio-map
    style="width: 1000px; height: 600px;"
    enablePinning
    enableSearch
    contentMap="https://api.myfiber.at/tile/embed/style.json?token=YOUR_TOKEN"
    center="[14.5, 47.5]"
    zoom="8"
></yio-map>
<script src="https://cdn.jsdelivr.net/npm/yio-map@0/dist/yio-map.iife.js"></script>

Usage in WordPress

Using Custom HTML Block

  1. Edit your page/post in WordPress
  2. Add a Custom HTML block (not a paragraph block)
  3. Paste the embed code directly

Using WPCode Plugin

For reusable embeds across multiple pages, use the WPCode plugin:

  1. Install and activate WPCode – Insert Headers and Footers
  2. Go to Code Snippets > Add Snippet
  3. Select Add Your Custom Code (New Snippet)
  4. Set code type to HTML Snippet
  5. Paste the embed code and save
  6. Use the generated shortcode (e.g., [wpcode id="123"]) on any page

Security

The embed token encodes:

  • Allowed Origin: Only requests from the specified domain are permitted (CORS)
  • Tileset Access: Access is limited to the selected tileset
  • Tenant Data: Only your organization's data is visible

Tokens are valid for 1 year. Generate a new token if you need to change the allowed domain or tileset.

Customization

Attributes

Attribute Description
style CSS styling for the map container (width, height)
contentMap URL to the style.json with your embed token
center Initial map center as [longitude, latitude]
zoom Initial zoom level (1-22)
enableSearch Shows address search input
enablePinning Allows placing markers on the map

Examples

Adjust the map dimensions by modifying the style attribute:

<!-- Full width, responsive height -->
<yio-map
    style="width: 100%; height: 500px;"
    ...
></yio-map>

To disable the address search for a simpler display, remove the enableSearch attribute:

<yio-map
    style="width: 800px; height: 400px;"
    enablePinning
    contentMap="..."
    center="[14.5, 47.5]"
    zoom="10"
></yio-map>

Further customization options can be found in the open source yio-map project.