Skip to content

How to Integrate the Selector into a Web Page

Jump to bottom
Petr Matousek edited this page Jan 24, 2021 · 8 revisions

Method 1: Direct <div> rendering

  1. Decide where within the page <body> the selector should appear and insert the following HTML code there:
<div id="ums-mast-selector"></div>
  1. Put the following HTML code inside the page <head>:
<link rel="stylesheet" href="https://mat127.github.io/ums/ums.css">
<script src="https://mat127.github.io/ums/ums.js"></script>
<script>MastSelector.register("ums-mast-selector");</script>

Note that "ums-mast-selector" id can be replaced with any other id (e.g. in case of conflict with id already existing within the page). But do not forget to update both the <div> and the MastSelector.build() call within the inline <script> put in the <head> section.

In case that design changes are necessary (font, colors, etc.) replace the

<link rel="stylesheet" href="https://mat127.github.io/ums/ums.css">

with your own style definitions.

Method 2: External <iframe>

  1. Decide where within the page <body> the selector should appear and insert the following HTML code there:
<iframe frameborder="0" width="300" height="300" src="https://mat127.github.io/ums/if-src.html"></iframe>

Select the size and other attributes according to page design.

Clone this wiki locally