MediaOS – Embed Component Documentation

Getting Started

MediaOS Embed components are standard HTML custom elements powered by Vue 3. They connect automatically to your MediaOS account using the metadata tags on each page.

ℹ️Install the MediaOS WordPress plugin to have the script and meta tags automatically injected. For non-WordPress sites follow the manual setup below.

Installation

Add the following to every page where you want to use embed components. Place the script tag at the bottom of <body> or use defer.

HTML – Required meta tags in <head>
<!-- Replace values with your real MediaOS account details -->
<meta name="mediaos:id" content="YOUR_WEBSITE_TOKEN"/>
<meta name="mediaos:postid" content="CURRENT_POST_ID"/>
<meta name="mediaos:authenticated" content="true_or_false"/>

HTML – Consent Mode stub (first script in <head>)
<!-- Must come BEFORE gtag.js / Google Tag Manager / any advertising tag -->
<script src="https://mos-scripts.com/consent-stub.js"></script>

⚠️The consent stub is required for Google Consent Mode v2 to work. It is a small, dependency-free classic script that sets the Consent Mode defaults for the visitor's region before any Google tag reads them. The main MediaOS script is a module, and module scripts are always deferred — so it cannot set defaults in time on its own. Without the stub, advertising and analytics tags fire before the visitor's choice is applied. The WordPress plugin injects this automatically; only non-WordPress sites need to add it by hand. If you already run OneTrust, Cookiebot or another CMP that sets Consent Mode defaults, leave this out.

HTML – Script include (before </body>)
<script type="module" src="https://mos-scripts.com/a/main.js"></script>

Once the script loads, all MediaOS custom elements are available. Place any component tag in your HTML and it will render automatically.

To avoid the extra request you may paste the contents of consent-stub.js inline instead, as long as it stays in a plain <script> tag — not async, not defer, and not type="module". Any of those make it run too late to matter.

ℹ️Can't add custom HTML to your CMS? Every component also has a ready-made hosted page URL you can link to instead.

JavaScript API

After the script loads, a global window.MediaOS object is available with helper methods.

Method	Signature	Description
`AddToCart`	`(offerId: number)`	Add an offer to the shopping cart by ID.
`GetContactToken`	`() → string\|null`	Return the current authenticated contact's JWT token.
`RunWorkflow`	`(id: number)`	Trigger a MediaOS workflow by ID.
`UserSsoJwt`	`(jwt: string)`	Authenticate a user via a custom SSO JWT token.
`ClearCache`	`()`	Clear cached account/user settings from local storage.
`SetDomain`	`(domain: string) → Promise`	Switch the local-storage domain namespace (e.g. `"otherdomain.com"`) and reload settings, cart, and creatives for that domain. Used when one page serves multiple MediaOS sites.
`ResetDomain`	`() → Promise`	Reset the domain namespace back to the real hostname.
`GetUser`	`() → User\|null`	Return the current user object (or `null` if not logged in).
`LogStats`	`(isFinal?: bool)`	Manually flush an analytics stat event to the server.
`AdServerImpression`	`(adInsertionID, adID)`	Log an ad impression event.
`AdServerClick`	`(adInsertionID, adID)`	Log an ad click event.
`AdServerHover`	`(adInsertionID, adID)`	Log an ad hover event.
`EnableCookies`	`() → Promise`	Grant GDPR cookie consent and record it server-side. See Privacy & GDPR.
`DisableCookies`	`()`	Withdraw GDPR cookie consent and purge stored identifiers.
`GetCookieConsent`	`() → bool`	Whether the visitor has granted GDPR cookie consent.
`GrantConsent`	`(source?: string)`	Grant all tracking-consent categories (analytics, advertising, sale/share).
`DenyConsent`	`(source?: string)`	Deny all tracking-consent categories.
`DoNotSellOrShare`	`(source?: string)`	CPRA opt-out: keep analytics, deny advertising and sale/share.
`SetConsent`	`(partial: object)`	Fine-grained consent update per category.
`GetConsent`	`() → object`	Current consent snapshot.

Triggering Workflows via JavaScript

HTML
<script type="module" id="mosScript" src="https://mos-scripts.com/a/main.js"></script>
<script>
  document.getElementById('mosScript').addEventListener('load', function() {
    window.MediaOS.RunWorkflow('INSERT_WORKFLOW_ID_HERE');
  });
</script>

URL Actions

Any page with the MediaOS embed script loaded automatically watches for special #mos hash fragments and triggers the corresponding action. Actions fire on page load, whenever a visitor clicks an <a> link whose href contains one of the hashes, and on browser navigation events — so you can wire up your site's menus, buttons, and links with plain HTML, no JavaScript required.

HTML – Example links
<!-- Open the login modal -->
<a href="#mosLogin">Sign In</a>

<!-- Open the registration modal -->
<a href="#mosRegister">Create Account</a>

<!-- Open the account panel to the Subscriptions section -->
<a href="#mosSubscriptions">My Subscriptions</a>

<!-- Also works as part of a full URL to another page -->
<a href="/account/#mosAccount">My Account</a>

Authentication Actions

Hash	Action
`#mosLogin`	Opens the login modal.
`#mosRegister`	Opens the registration modal.
`#mosLogout`	Logs the current user out. (Requires login.)

Account Panel Actions

These open the user account panel to a specific section. They require the visitor to be logged in — if not, the login modal opens instead (any #mos hash triggers the login modal for anonymous visitors), and the requested action runs once they authenticate and the hash is processed again.

Hash	Opens Account Section
`#mosAccount`	My Account — profile and contact details.
`#mosNewsletters`	Newsletter subscription preferences.
`#mosBookmarks`	Saved bookmarks.
`#mosPurchases`	Purchase history.
`#mosMemberships`	Memberships.
`#mosSubscriptions`	Subscriptions.
`#mosBusinessListings`	The user's business directory listings.
`#mosEventListings`	The user's event listings.

Other Actions

Hash / Parameter	Action
`#mosPN`	Triggers the OneSignal push-notification permission prompt. (Requires login and a configured OneSignal App ID.)
`#clear`	Clears cached MediaOS account/user settings from local storage and reloads the page (hash is removed on reload).
`#debug`	Enables test/debug mode for the embed components on the current page.
`?mode=test`	Query-string alternative to `#debug` — enables and persists test mode via local storage.
`?mosMessage=...`	Displays the given message to the visitor in an alert on page load.
`?mosLandingPageID=...`	Forces a specific landing page / access-rule wall to display.
`?offerID=...`	Adds the specified offer to the shopping cart on page load (useful for direct buy links in emails or ads).
`?mosInspect=...`	Opens the ad server inspector drawer for the signed token in the link. The token is stored in local storage so the tester can browse from page to page; the drawer clears it when the session ends or the token expires.
`?mosVerify=1`	Installation check. Confirms back to the window that opened the link (the app's tag wizard) and shows a "You are set up with MediaOS" badge on the page. Runs in the visitor's browser on purpose — a server-side fetch can be blocked by firewalls and wrongly report the script as missing.

Notes

Hash matching is a substring check — the hash may appear anywhere in the link's URL.
For anonymous visitors, any link containing #mos opens the login modal (except #mosRegister, which opens registration).
Actions also run when navigating directly to a URL containing the hash (e.g., linking from an email campaign: https://yoursite.com/#mosNewsletters).

Hosted Pages

Every embeddable MediaOS element also has a shareable hosted URL — no embedding required. Hosted pages are useful for email campaigns, social posts, QR codes, and for publishers whose CMS makes adding custom HTML difficult. They can also be framed inside an existing page.

Format https://pages.mediaos.com/{your-domain}/{route}/?params

Examples
https://pages.mediaos.com/acme.com/form/?id=123
https://pages.mediaos.com/acme.com/checkout/
https://pages.mediaos.com/acme.com/account/
https://pages.mediaos.com/acme.com/tickets/?eventId=88
https://pages.mediaos.com/acme.com/directory/

// Drop the site-name header (useful inside an iframe)
https://pages.mediaos.com/acme.com/subscribe/?header=0

ℹ️The first path segment is your registered website domain. Any query-string parameter is passed straight through to the underlying component as a prop — so ?id=123 on the form route is the same as <mediaos-form id="123">.

Routes

Each route can be reached by its short alias or its full name. Routes marked login prompt the visitor to sign in (or register) first.

Route (alias)	Full name	Component	Login
`account`	`my-account`	Member account area	login
`account-access`	`portal-access`	<mediaos-portal-access>	—
`add-button`	`add-button`	<mediaos-checkout-add-button>	—
`advertise`	`self-serve-ads`	<mediaos-self-serve-ads>	—
`bookmarks`	`manage-bookmarks`	<mediaos-manage-bookmarks>	login
`chat`	`ticket-chat`	<mediaos-ticket-chat>	—
`checkout`	`checkout`	<mediaos-checkout>	—
`classifieds`	`mediaos-classifieds`	<mediaos-classifieds>	—
`comment-feed`	`comment-feed`	<mediaos-comment-feed>	—
`comments`	`comments`	<mediaos-comments>	—
`content-feed`	`content-feed`	<mediaos-content-feed>	—
`content-tile`	`content-tile`	<mediaos-content-tile>	—
`directory`	`business-directory`	<mediaos-business-directory>	—
`directory-list`	`business-directory-lists`	<mediaos-business-directory-lists>	—
`donate`	`support-us`	<mediaos-support-us>	—
`donors`	`donors`	<mediaos-donors>	—
`events`	`event-calendar`	<mediaos-event-calendar>	—
`expo-directory`	`expo-directory`	<mediaos-expo-directory>	—
`flipbook`	`flip-book`	<mediaos-flip-book>	—
`form`	`form`	<mediaos-form>	—
`forum`	`forum-home`	<mediaos-forum-home>	—
`get-listed-form`	`get-listed`	<mediaos-get-listed>	—
`goal`	`donate-goal`	<mediaos-support-goal>	—
`groups`	`groups`	<mediaos-groups>	—
`lists`	`business-lists`	<mediaos-business-lists>	—
`login`	`login-form`	<mediaos-login-form>	—
`manage-newsletter`	`newsletter-manage`	<mediaos-newsletter-manage>	—
`news-bite`	`news-bite-display`	<mediaos-news-bite-display>	—
`newsletter-archive`	`newsletter-archive`	<mediaos-newsletter-archive>	—
`page`	`landing-page`	<mediaos-landing-page>	—
`payment`	`simple-payment`	<mediaos-simple-payment>	—
`perks`	`perks`	<mediaos-perks>	—
`poll`	`poll`	<mediaos-poll>	—
`profile`	`business-profile`	<mediaos-business-profile>	—
`profiles`	`profile-list`	<mediaos-business-profile-list>	—
`quick-vote-generator`	`best-of-quick-vote-generator`	<mediaos-best-of-quick-vote-generator>	—
`register` / `registration`	`register-form`	<mediaos-register-form>	—
`schedule`	`event-schedule`	<mediaos-event-schedule>	—
`speakers`	`event-speakers`	<mediaos-event-speakers>	—
`sponsor-tiers`	`mos-sponsor-tiers`	<mediaos-sponsor-tiers>	—
`sso`	`mediaos-sso`	<mediaos-sso>	—
`store`	`store`	<mediaos-store>	—
`submission`	`content-submission`	<mediaos-content-submission>	—
`subscribe`	`newsletter-subscribe`	<mediaos-newsletter-subscribe>	—
`subscriptions`	`one-page-subscribe`	<mediaos-one-page-subscribe>	—
`ticket-list`	`ticket-list`	<mediaos-tickets-list>	—
`tickets`	`event-checkout`	<mediaos-event-checkout>	—
`vote`	`voting-page`	<mediaos-best-of-voting-page>	register
`winners`	`best-of-winners`	<mediaos-best-of-winners>	—

Notes

Hosted pages render inside a light shell that shows your site name; add ?header=0 (or ?hideHeader=1) to remove it.
Unknown domains or routes return a plain 404 page marked noindex, nofollow.
Hosted pages use the same account settings, branding, login session, and consent rules as the embed script.

Data Privacy & Consent (GDPR / CPRA)

MediaOS Embed ships with a built-in privacy consent manager that handles GDPR cookie consent, CPRA "Do Not Sell or Share" opt-outs, and the browser's Global Privacy Control (GPC) signal. It also broadcasts consent state to common third-party tag platforms (Google Consent Mode v2, GTM dataLayer, Meta Pixel) so a single call from your consent banner keeps everything in sync.

ℹ️The consent manager initializes as soon as the embed script loads — before any MediaOS analytics beacons or third-party tags fire — and pushes a default Google Consent Mode v2 state so a visitor's prior opt-out is honored on every page view.

Cookie consent controls whether MediaOS persists identifiers (unknown visitor ID, bookmarks, group memberships) in the browser at all. Granting consent also records the consent event server-side against the visitor for your GDPR audit trail.

Method	Signature	Description
`MediaOS.EnableCookies`	`() → Promise`	Grant cookie consent. Enables local persistence and logs the GDPR consent event server-side.
`MediaOS.DisableCookies`	`()`	Withdraw cookie consent. Removes the stored unknown-visitor ID, bookmarks, and group data. An active login session is treated as "strictly necessary" and is preserved.
`MediaOS.GetCookieConsent`	`() → bool`	Returns `true` if the visitor has granted cookie consent.

JS – Wiring a cookie banner
document.querySelector('#accept-cookies').addEventListener('click', function() {
  window.MediaOS.EnableCookies();
});

document.querySelector('#reject-cookies').addEventListener('click', function() {
  window.MediaOS.DisableCookies();
});

Tracking consent is managed per category. Every change is persisted, re-broadcast to third-party tag platforms, and attached to all outbound MediaOS analytics/ad beacons (including a noIp flag that tells the server to suppress IP and postal-code capture for opted-out visitors).

Category	EU / UK / CH	US & elsewhere	Covers
`analytics`	`denied`	`granted`	First-party page-view / dwell-time measurement.
`advertising`	`denied`	`granted`	Personalized ads and ad measurement.
`saleOrShare`	`denied`	`granted`	Sale or sharing of personal information with third parties (CPRA §1798.135).

Defaults are region-scoped, not runtime-branched. The consent stub emits a denied default carrying a region list of the 32 EEA/UK/Switzerland country codes alongside a granted default with no region, and Google resolves the visitor's jurisdiction at its own edge. There is therefore no geo lookup standing between page load and the first tag, and no race between them.

MediaOS resolves the visitor's country separately — from a 24-hour localStorage cache, then the browser timezone, then the Cloudflare edge trace endpoint — but only to decide which interface to show. A geo failure can pick the wrong UI; it can never pick the wrong tracking state.

The Consent Interface

Visitors in the EU, UK or Switzerland get a strict opt-in modal on first visit with equal-weight Accept All and Reject All buttons plus a Manage Preferences view with a toggle per category. Nothing is set until they choose. Everyone else sees no modal at all — just a persistent privacy control. Both are rendered by <mediaos-consent-manager>, which the embed script appends to <body> automatically.

A privacy control is available in every region, including the EU, because GDPR Art. 7(3) requires that withdrawing consent be as easy as giving it. Place it wherever you like:

HTML / JS – Privacy control placement
<!-- Drop-in element. Labels itself for the visitor's jurisdiction. -->
<mediaos-privacy-choices></mediaos-privacy-choices>

// Or wire your own footer link:
window.MediaOS.ShowPrivacyChoices();      // open the preferences panel
window.MediaOS.OptOutOfSaleOrShare();     // one-click CPRA opt-out

If neither the element nor the MediaOS footer bar is on the page, a small fixed control appears in the bottom-left corner so the requirement is never silently unmet. A US visitor who opts out sees a brief confirmation — "Your opt-out preference has been honored." — announced in an aria-live region. It is not shown for GPC-driven opt-outs, since the visitor did not just do anything.

Method	Signature	Description
`MediaOS.GrantConsent`	`(source?: string)`	Grant all categories ("Accept All").
`MediaOS.DenyConsent`	`(source?: string)`	Deny all categories ("Deny All").
`MediaOS.DoNotSellOrShare`	`(source?: string)`	CPRA opt-out shortcut — keeps first-party analytics on, denies advertising and sale/share.
`MediaOS.SetConsent`	`({analytics?, advertising?, saleOrShare?})`	Fine-grained update. Each value is `'granted'` or `'denied'`; omitted categories are unchanged.
`MediaOS.GetConsent`	`() → object`	Current snapshot: `{analytics, advertising, saleOrShare, gpc, source, updatedAt}`.

JS – Consent examples
// Accept all (e.g., banner "Accept" button)
window.MediaOS.GrantConsent();

// CPRA "Do Not Sell or Share My Personal Information" link
window.MediaOS.DoNotSellOrShare();

// Fine-grained preferences panel
window.MediaOS.SetConsent({ analytics: 'granted', advertising: 'denied' });

// Read current state
console.log(window.MediaOS.GetConsent());

The `MediaOS.Consent` Object

For integrations that need to react to consent changes (GTM, GA4, ad tags), a richer API is exposed at window.MediaOS.Consent. A mediaos:consentchange CustomEvent is dispatched on window every time consent changes, with the new snapshot in event.detail.

Member	Signature	Description
`Consent.get`	`() → object`	Current consent snapshot.
`Consent.set`	`(partial: object)`	Same as `MediaOS.SetConsent`.
`Consent.optIn`	`()`	Grant everything (no-op for sale/share and advertising when GPC is asserted).
`Consent.optOut`	`()`	Deny everything.
`Consent.isOptedOut`	`() → bool`	`true` if GPC is asserted or sale/share is not granted. When true, MediaOS beacons instruct the server to drop the visitor's IP before persisting.
`Consent.onChange`	`(handler) → unsubscribe`	Subscribe to consent changes; returns an unsubscribe function.
`Consent.syncThirdPartyTags`	`()`	Re-push the current state into Google Consent Mode v2, the GTM dataLayer, and Meta Pixel. Useful for late-loading tags.
`Consent.EVENT_NAME`	`string`	The event name: `'mediaos:consentchange'`.

JS – Reacting to consent changes
window.addEventListener('mediaos:consentchange', function(e) {
  console.log('Consent updated:', e.detail);
});

// Or with the helper (returns an unsubscribe function):
var stop = window.MediaOS.Consent.onChange(function(e) { /* ... */ });

Global Privacy Control (GPC)

When the browser asserts navigator.globalPrivacyControl, the consent manager treats it as a legally binding opt-out: advertising and saleOrShare are forced to denied. GPC is honored in every region, not just the US. First-party analytics may still be explicitly granted by the visitor. The current GPC state is available on the consent snapshot as the gpc boolean.

In the US and other opt-out jurisdictions GPC is absolute — GrantConsent() cannot override it. In the EU/UK/Switzerland it can be superseded by one thing only: an explicit grant made by the visitor through the consent modal or preferences panel, which is the specific, informed, affirmative act GDPR requires. Without that exception the modal would be offering a choice it does not honor.

Notes

Consent choices are persisted in namespaced localStorage and survive page loads. A choice lasts 365 days by default (configurable per site), after which the visitor is asked again.
The stub reads that stored choice synchronously, so a returning visitor's exact preference is emitted as the Consent Mode default with zero delay and no update round trip. Only first-time visitors incur a wait_for_update.
Opted-out visitors' analytics beacons are sent with a noIp flag; the server drops REMOTE_ADDR and postal data before persisting.
Pages listed in your MediaOS website settings as the privacy policy, terms, or GDPR URL are automatically excluded from paywall / access-rule processing.
Consent Mode pushes work even if gtag.js / GTM / the Meta Pixel have not loaded yet — calls are queued through each platform's standard stub.

Advertising

Display MediaOS ad creatives on any page. Supports fallback content when no ad is available.

<mos-creative>

Ad unit — displays a served creative

▼

Description

Renders a MediaOS-served ad creative. Slot content is shown as a fallback when no MediaOS ad is available (e.g., a Google Ad Manager tag or a default image).

Usage

HTML
<!-- Basic -->
<mos-creative></mos-creative>

<!-- Constrained size -->
<mos-creative max-width="300" max-height="250"></mos-creative>

<!-- Fallback to Google Ad -->
<mos-creative>
  <script>googletag.cmd.push(function() { googletag.display('your_slot'); });</script>
</mos-creative>

<!-- Fallback to image -->
<mos-creative>
  <img src="default-ad.png"/>
</mos-creative>

Props

Prop	Type	Default	Required	Description
`unit-ids`	string	""	optional	Comma-separated list of ad unit IDs to target.
`group`	number	1	optional	Rotation group. Slots that share a group number never serve the same advertiser twice on one page — use different group numbers when you want independent rotations.
`max-width`	number	2000	optional	Maximum width of the rendered ad in pixels.
`max-height`	number	2000	optional	Maximum height of the rendered ad in pixels.
`product-id`	number	null	optional	Filter creatives by a specific product ID.
`advertiser-id`	number	null	optional	Filter creatives by a specific advertiser ID.
`name`	string	null	optional	Named identifier for this ad slot (for debugging).
`gam-slot`	string	""	optional	Google Ad Manager slot name for GAM passback integration.
`debug`	boolean	false	optional	Enable debug overlay showing ad targeting information.

<mediaos-self-serve-ads>

Self-serve advertising checkout wizard

▼

Description

Lets advertisers buy ad space from your site without talking to a rep. The wizard walks them through choosing a product/placement, uploading or building the creative, and paying — creating the order (and optionally a contract) in MediaOS. Configure the offer in the app and reference the saved configuration by id. Renders either as a trigger button that opens a modal, or inline in the page.

Usage

HTML
<!-- Button that opens the wizard in a modal -->
<mediaos-self-serve-ads id="a1b2c3" label="Advertise With Us"></mediaos-self-serve-ads>

<!-- Embedded directly in the page -->
<mediaos-self-serve-ads id="a1b2c3" display-type="inline"></mediaos-self-serve-ads>

Props

Prop	Type	Default	Required	Description
`id`	string	null	optional	Saved checkout configuration token — the full configuration is loaded from MediaOS.
`config`	string	null	optional	Inline (URL-encoded JSON) configuration instead of a saved `id`.
`label`	string	"Advertise Now"	optional	Trigger button label.
`display-type`	string	"button"	optional	`button` opens the wizard in a modal; `inline` renders it in the page.
`go-to-checkout`	boolean	null	optional	Send the advertiser straight to checkout after selection.
`price-as-label`	boolean	null	optional	Show the price as the trigger button label.
`show-quantity`	boolean	false	optional	Show a quantity input beside the trigger button.
`contract-template-id`	number	null	optional	Generate a contract from this template when the purchase completes.
`button-color`	string	null	optional	CSS background color of the trigger button.
`text-color`	string	null	optional	CSS text color of the trigger button.
`size`	string	null	optional	Button size: `sm`, `md`, or `lg`.
`button-styles`	string	null	optional	Inline CSS applied to the trigger button.

Best of Voting

Embed the full "Best of" voting experience, winner displays, and quick-vote QR code generators.

<mediaos-best-of-voting-page>

Full voting ballot page

▼

Description

Renders the complete Best of voting ballot for the active voting campaign. Users must be logged in to vote. Automatically opens the registration modal if not authenticated.

Usage

HTML
<mediaos-best-of-voting-page></mediaos-best-of-voting-page>

<!-- Constrained in a scrollable container -->
<mediaos-best-of-voting-page style="max-height:600px;overflow-y:auto;"></mediaos-best-of-voting-page>

Props

Prop	Type	Default	Required	Description
`id`	number	null	optional	Voting campaign ID. Defaults to the active campaign if omitted.

<mediaos-best-of-quick-vote-generator>

QR code quick-vote generator

▼

Description

Displays a QR code generator tool for creating quick-vote links that can be printed or displayed at events.

Usage

HTML
<mediaos-best-of-quick-vote-generator></mediaos-best-of-quick-vote-generator>

No configurable props. The component reads the active voting campaign automatically.

<mediaos-best-of-winners>

Published winners display

▼

Description

Displays the published Best of winners for a specific voting campaign, grouped by category. Supports year selection.

Usage

HTML
<mediaos-best-of-winners id="42"></mediaos-best-of-winners>

Props

Prop	Type	Default	Required	Description
`id`	number	—	required	The Best of voting campaign ID.

Bookmarks

Allow logged-in users to bookmark pages or business directory profiles.

<mediaos-bookmarks>

Bookmark toggle button

▼

Description

A heart/bookmark icon that lets logged-in users save the current page or a specific content object. Defaults to bookmarking the current post page when no object-id is provided.

Usage

HTML
<!-- Bookmark current page -->
<mediaos-bookmarks></mediaos-bookmarks>

<!-- Bookmark a specific object -->
<mediaos-bookmarks object-id="123" object-type="MemberBusinessProfiles"></mediaos-bookmarks>

Props

Prop	Type	Default	Required	Description
`object-id`	number\|string	current post	optional	The ID of the object to bookmark. Defaults to the current page post ID.
`object-type`	string	WebsitePosts	optional	The type of object: `WebsitePosts` or `MemberBusinessProfiles`.
`for-expo`	boolean	false	optional	Enable expo-specific bookmark behavior.

<mediaos-manage-bookmarks>

User's saved bookmarks list

▼

Description

Displays all of the current user's saved bookmarks in a list view. Requires the user to be logged in.

Usage

HTML
<mediaos-manage-bookmarks></mediaos-manage-bookmarks>

No configurable props.

Classifieds

<mediaos-classifieds>

Classified ads listing

▼

Description

Displays a classified ads listing with month/year browsing. Content is filtered by the MediaOS website configuration.

Usage

HTML
<mediaos-classifieds></mediaos-classifieds>

<!-- Filter to a specific classifieds section -->
<mediaos-classifieds id="5"></mediaos-classifieds>

Props

Prop	Type	Default	Required	Description
`id`	number	null	optional	Optional classifieds section ID to filter results.

Content

Embed article feeds, individual content tiles, knowledge bases, content submission forms, and registration walls.

<mediaos-content-feed>

Article / content feed

▼

Description

Renders a filterable list of content/articles from a MediaOS website or specific categories. Includes category navigation, pagination, and optional images.

Usage

HTML
<mediaos-content-feed></mediaos-content-feed>

<!-- Specific website and categories with images -->
<mediaos-content-feed
  website-id="17"
  category-ids="3,7"
  show-image="true"
  image-position="left">
</mediaos-content-feed>

Props

Prop	Type	Default	Required	Description
`category-ids`	string	null	optional	Comma-separated list of category IDs to filter by.
`post-types`	string	null	optional	Comma-separated list of WordPress post types to include (e.g. `"post,event"`).
`website-id`	string	null	optional	MediaOS website ID to pull content from.
`show-image`	string	"false"	optional	Set to `"true"` to display featured images.
`image-position`	string	"left"	optional	Position of the image: `left` or `top`.
`newsfeed-ids`	string	""	optional	Comma-separated newsfeed IDs to include.
`target`	string	"_self"	optional	Link target attribute (`_self` or `_blank`).
`show-category-navigation`	string	"true"	optional	Set to `"false"` to hide category filter tabs.
`open-in-new-tab`	string	"false"	optional	Open article links in a new tab.
`show-ads`	string	"false"	optional	Inject ad units between content items.
`max-excerpt-length`	number	200	optional	Maximum character length of article excerpt preview.

<mediaos-content-tile>

Single article tile

▼

Description

Displays a single article/post as a card tile with title, image, and link. Fetches post data from the WordPress REST API.

Usage

HTML
<mediaos-content-tile post-id="429"></mediaos-content-tile>

<!-- Manual data (no API fetch) -->
<mediaos-content-tile
  set-title="My Article"
  set-url="https://example.com/my-article"
  set-image-url="https://example.com/image.jpg">
</mediaos-content-tile>

Props

Prop	Type	Default	Required	Description
`post-id`	number	null	optional	WordPress post ID. Fetches title and image from WP REST API.
`set-title`	string	null	optional	Manually set the tile title (overrides API fetch).
`set-url`	string	null	optional	Manually set the tile link URL.
`set-image-url`	string	null	optional	Manually set the tile image URL.

<mediaos-content-submission>

Content / press release submission form

▼

Description

A form that allows users to submit content (such as press releases or news items) directly from your website. Supports optional payment gating.

Usage

HTML
<mediaos-content-submission></mediaos-content-submission>

<!-- With a category and optional cost -->
<mediaos-content-submission
  category-id="3"
  cost="25.00">
</mediaos-content-submission>

Props

Prop	Type	Default	Required	Description
`cost`	number	—	optional	If set, user must pay this amount before submitting.
`category-id`	number	—	optional	Pre-assign submissions to a specific content category.
`type`	string	false	optional	Content type identifier for the submission.
`business-profile-id`	number	null	optional	Associate the submission with a business directory profile.
`invoice-line-item-type-i-d`	number	null	optional	Revenue category (invoice line item type) applied to the paid submission's invoice line. Note the exact attribute spelling.

<mediaos-kb-display>

Knowledge base browser

▼

Description

Renders a full knowledge base UI with category navigation, search, and article display. Suitable for help centers and documentation portals.

Usage

HTML
<mediaos-kb-display></mediaos-kb-display>

<!-- Filter to specific website and post types -->
<mediaos-kb-display
  website-id="5"
  category-ids="10,12"
  post-types="article,faq">
</mediaos-kb-display>

Props

Prop	Type	Default	Required	Description
`website-id`	string	null	optional	MediaOS website ID to pull knowledge base content from.
`category-ids`	string	null	optional	Comma-separated list of category IDs to include.
`post-types`	string	null	optional	Comma-separated list of content post types to include.

Business Directory

Full-featured business directory components — searchable listings, individual profiles, list views, and expo floor plans.

<mediaos-business-directory>

Full searchable directory

▼

Description

Renders the full business directory with category tiles, search, map integration, and paginated business listings.

Usage

HTML
<mediaos-business-directory></mediaos-business-directory>

Props

Prop	Type	Default	Required	Description
`height`	string	"100%"	optional	CSS height of the directory container.
`product-id`	number	null	optional	Filter directory to a specific product/tier.
`id`	number	null	optional	Pre-select a business by ID on load.
`max-sub-categories`	number	3	optional	Maximum number of sub-categories to display per category tile.
`layout`	string	"grid"	optional	Default results layout — `grid` or `list`. Visitors can switch it and their choice is remembered.
`map`	boolean	true	optional	Set to `false` to hide the map view.

<mediaos-business-directory-lists>

Directory filtered by list

▼

Description

Displays the business directory filtered to a specific curated list of businesses, with optional map.

Usage

HTML
<mediaos-business-directory-lists id="10"></mediaos-business-directory-lists>

Props

Prop	Type	Default	Required	Description
`id`	number	—	required	The business list ID to display.
`height`	string	"100%"	optional	CSS height of the container.
`map`	boolean	true	optional	Set to `false` to hide the map.

<mediaos-business-lists>

All business lists home

▼

Description

Displays the home screen for all business lists — a grid of all configured curated business lists.

Usage

HTML
<mediaos-business-lists></mediaos-business-lists>

No configurable props.

<mediaos-business-profile>

Single business profile page

▼

Description

Renders the full detail view of a single business directory profile including address, map, social links, hours, images, and related articles.

Usage

HTML
<mediaos-business-profile id="1"></mediaos-business-profile>

Props

Prop	Type	Default	Required	Description
`id`	number	—	required	The business profile ID to display.
`display-single-column`	boolean	false	optional	Force single-column layout.
`display`	array	null	optional	Restrict which profile sections render, in order (e.g. `["header","about","map"]`). Omit to show everything the listing's plan allows.
`google-maps-api-key`	string	null	optional	Use your own Google Maps key for the profile map instead of the MediaOS default.

<mediaos-business-profile-list>

Business profile list view

▼

Description

Displays businesses from a specific profile list as a scrollable card list with map integration.

Usage

HTML
<mediaos-business-profile-list id="3"></mediaos-business-profile-list>

Props

Prop	Type	Default	Required	Description
`id`	number\|string	—	required	The business profile list ID.
`height`	string	"100%"	optional	CSS height of the container.

<mediaos-expo-directory>

Expo / event floor plan

▼

Description

Embeds an interactive expo floor plan with clickable booth locations and an optional directory listing of exhibitors. Commonly used for trade shows and community events.

Usage

HTML
<mediaos-expo-directory id="85"></mediaos-expo-directory>

<!-- With exhibitor list shown -->
<mediaos-expo-directory id="85" :hide-list="false"></mediaos-expo-directory>

Props

Prop	Type	Default	Required	Description
`id`	number\|string	—	required	The expo/floor plan ID.
`height`	string	"100%"	optional	CSS height of the floor plan container.
`hide-list`	boolean	false	optional	Set to `true` to hide the side exhibitor directory list.

ℹ️For the standalone booth map without the exhibitor directory, see <mediaos-floor-plan-viewer>.

<mediaos-get-listed>

Directory listing sign-up form

▼

Description

A short lead form that lets a business request a directory listing. Categories are loaded from the directory automatically. On submit, the business receives an email with a secure link to finish building their listing — no account creation required up front.

Usage

HTML
<mediaos-get-listed id="4"></mediaos-get-listed>

Props

Prop	Type	Default	Required	Description
`id`	number	null	optional	Directory ID. When omitted, the publisher's first directory is used.
`title`	string	"Get Listed in Our Directory"	optional	Heading above the form.
`button-label`	string	"Submit My Business"	optional	Submit button label.

<mediaos-upgrade-listing>

Existing listing upgrade request

▼

Description

Lets an already-listed business request a secure link to manage and upgrade its listing. The visitor enters the email on file; MediaOS verifies it against the advertiser and emails the link. The response is intentionally neutral so the form can't be used to discover which emails exist.

Usage

HTML
<!-- Anywhere in the directory -->
<mediaos-upgrade-listing></mediaos-upgrade-listing>

<!-- Pinned to one listing (e.g. on the profile page) -->
<mediaos-upgrade-listing profile-id="918"></mediaos-upgrade-listing>

Props

Prop	Type	Default	Required	Description
`id`	number	null	optional	Directory ID. When omitted, the publisher's first directory is used.
`profile-id`	number	null	optional	Pins the form to one listing and verifies the email against that listing's advertiser.
`title`	string	"Upgrade Your Listing"	optional	Heading above the form.
`subtitle`	string	explanatory text	optional	Supporting text below the heading.
`button-label`	string	"Send My Upgrade Link"	optional	Submit button label.

Donations & Fundraising

Accept donations, track fundraising goals, and recognize donors on your website.

<mediaos-support-us>

Donation / membership widget

▼

Description

A flexible fundraising widget supporting monthly, yearly, one-time, and custom donation amounts. Links to MediaOS offers for payment processing.

Usage

HTML
<mediaos-support-us
  monthly-offer-id="11"
  yearly-offer-id="12"
  one-time-offer-id="13">
</mediaos-support-us>

Props

Prop	Type	Default	Required	Description
`monthly-offer-id`	number	—	optional	MediaOS offer ID for a monthly recurring donation.
`yearly-offer-id`	number	—	optional	MediaOS offer ID for an annual donation.
`one-time-offer-id`	number	false	optional	MediaOS offer ID for a one-time donation.
`membership-label`	string	""	optional	Label text shown above the donation type selector.
`button-text`	string	"Support Us"	optional	Call-to-action button text.
`amounts`	array	[20,40,100,120,220,320]	optional	Preset dollar amounts shown as quick-select buttons.

<mediaos-support-goal>

Fundraising progress bar

▼

Description

Displays an animated progress bar showing progress toward a fundraising goal for the current month or a custom time period.

Usage

HTML
<mediaos-support-goal id="1" target="5000"></mediaos-support-goal>

Props

Prop	Type	Default	Required	Description
`id`	number	—	optional	Donation goal configuration ID.
`target`	number	0	optional	Dollar amount fundraising target.
`type`	string	"month"	optional	Time period for the goal: `month` or `year`.
`color`	string	primary color	optional	CSS color for the progress bar fill.

<mediaos-donors>

Donor recognition wall

▼

Description

Displays a grid of donor names pulled from a MediaOS donation campaign. Useful for recognition pages and thank-you walls.

Usage

HTML
<mediaos-donors id="1" columns="4"></mediaos-donors>

Props

Prop	Type	Default	Required	Description
`id`	string	""	optional	Donation campaign or offer ID to pull donors from.
`columns`	number	4	optional	Number of columns to split the donor names into.

E-Commerce

Sell memberships, products, and events directly from your website with MediaOS checkout components.

<mediaos-store>

Product / offer store

▼

Description

Displays a grid of purchasable offers from MediaOS — memberships, events, digital products, or physical products.

Usage

HTML
<mediaos-store></mediaos-store>

<!-- Show only memberships -->
<mediaos-store show-memberships="true" limit="6"></mediaos-store>

Props

Prop	Type	Default	Required	Description
`show-digital-products`	boolean	false	optional	Include digital product offers.
`show-events`	boolean	false	optional	Include event ticket offers.
`show-memberships`	boolean	false	optional	Include membership/subscription offers.
`show-physical-products`	boolean	false	optional	Include physical product offers.
`go-to-checkout`	boolean	false	optional	Immediately navigate to checkout after adding to cart.
`limit`	number	10	optional	Maximum number of offers to display.
`button-label`	string	"Add to Cart"	optional	Text for the add-to-cart button on each tile.
`membership-type-id`	number	null	optional	Filter to a specific membership type ID.
`product-id`	number	null	optional	Scope the store to a single product or event — e.g. an event page listing only that event's ticket types.
`emit-add-to-cart-only`	boolean	false	optional	Emit an add-to-cart event instead of adding the offer to the cart. Used when a parent component (such as the event checkout wizard) owns the cart flow.

<mediaos-checkout>

Full checkout / cart UI

▼

Description

Renders the full MediaOS checkout experience including cart review, address entry, payment, and order confirmation. Place this on your dedicated checkout page.

Usage

HTML
<mediaos-checkout></mediaos-checkout>

<!-- Trimmed-down checkout embedded inside another page -->
<mediaos-checkout
  hide-cart="true"
  hide-headers="true"
  success-redirect-url="/thank-you/">
</mediaos-checkout>

Cart contents are managed globally via the MediaOS cart store. The props below only control which parts of the checkout UI are rendered.

Props

Prop	Type	Default	Required	Description
`form-id`	number	null	optional	MediaOS form ID to collect additional information as part of checkout.
`success-redirect-url`	string	""	optional	Send the buyer here after a successful order instead of showing the built-in confirmation.
`hide-cart`	boolean	false	optional	Hide the cart / line-item review panel.
`hide-headers`	boolean	false	optional	Hide the section heading text throughout the checkout.
`hide-sign-in`	boolean	false	optional	Hide the "already have an account? sign in" prompt.
`hide-name-fields`	boolean	false	optional	Hide the first/last name inputs (use when they are collected elsewhere).
`hide-gift-recipient`	boolean	false	optional	Hide the "this is a gift" recipient section.
`hide-newsletter-opt-in`	boolean	false	optional	Hide the newsletter opt-in checkboxes.
`hide-footer-elements`	boolean	false	optional	Hide the footer links/legal text below the payment button.
`disable-promos`	boolean	false	optional	Remove the promo / coupon code entry field.
`disable-password`	boolean	false	optional	Do not ask a new buyer to create a password during checkout.

<mediaos-cart-icon>

Shopping cart icon for nav bar

▼

Description

A compact shopping cart icon with item count badge. Click to open a mini cart dropdown. Designed to be placed in a navigation bar.

Usage

HTML
<!-- In a nav bar -->
<mediaos-cart-icon height="50"></mediaos-cart-icon>

Props

Prop	Type	Default	Required	Description
`height`	number	40	optional	Height of the icon in pixels; adjusts internal padding automatically.
`icon-only`	boolean	false	optional	Show only the icon without the item count badge.
`text-styles`	string	null	optional	Inline CSS applied to the icon's text/count (e.g. `"color:#fff;font-size:14px;"`) so it matches your nav bar.

<mediaos-checkout-add-button>

Add-to-cart button

▼

Description

A configurable add-to-cart button for a specific MediaOS offer. Can display as a button, text link, or show the item price as its label.

Usage

HTML
<!-- Basic button -->
<mediaos-checkout-add-button offer-id="3"></mediaos-checkout-add-button>

<!-- Go directly to checkout after adding -->
<mediaos-checkout-add-button
  offer-id="3"
  go-to-checkout="true"
  label="Buy Now">
</mediaos-checkout-add-button>

Props

Prop	Type	Default	Required	Description
`offer-id`	number	—	required	The MediaOS offer ID to add to the cart.
`label`	string	"Add to Cart"	optional	Button label text.
`display-type`	string	"button"	optional	Render as `button` or `text` link.
`go-to-checkout`	boolean	null	optional	If `true`, navigates directly to the checkout page after adding.
`price-as-label`	boolean	null	optional	Replace the button label with the offer price.
`button-color`	string	null	optional	CSS background color of the button.
`text-color`	string	null	optional	CSS text color of the button.
`size`	string	null	optional	Button size: `sm`, `md`, or `lg`.
`show-quantity`	boolean	false	optional	Show a quantity selector next to the button.
`button-styles`	string	null	optional	Inline CSS applied directly to the button for full styling control.

<mediaos-one-page-subscribe>

Single-page membership checkout

▼

Description

A streamlined one-page subscription checkout flow. Displays available membership offers and the checkout in a single view. Pass a form-id to include a custom form step in the checkout flow.

Usage

HTML
<mediaos-one-page-subscribe></mediaos-one-page-subscribe>

<!-- With custom form step -->
<mediaos-one-page-subscribe form-id="7"></mediaos-one-page-subscribe>

Props

Prop	Type	Default	Required	Description
`form-id`	string	null	optional	Optional MediaOS form ID to embed within the checkout flow.
`success-redirect-url`	string	""	optional	Send the subscriber here after a successful purchase instead of showing the built-in confirmation.

<mediaos-offer-picker>

Radio list of purchase options

▼

Description

Turns your own HTML into a radio-button offer selector. Each child element with a data-offer-id attribute becomes a selectable option, so you control the pricing card markup completely. The first available option is auto-selected and swapped into the cart as the visitor changes their choice; offers that are no longer purchasable are automatically marked unavailable.

ℹ️Pair this with <mediaos-checkout> on the same page to build a custom-designed subscription page.

Usage

HTML
<mediaos-offer-picker>
  <div data-offer-id="12">
    <strong>Monthly</strong> — $9/mo
  </div>
  <div data-offer-id="13">
    <strong>Annual</strong> — $90/yr <em>(save 17%)</em>
  </div>
</mediaos-offer-picker>

No props. Options are read from the light-DOM children and their data-offer-id attributes.

<mediaos-simple-payment>

One-off payment / card capture form

▼

Description

A standalone payment form for taking a single amount without building a cart — invoices, deposits, donations to a fixed amount, or simply storing a card on file. Supports saved payment methods and reCAPTCHA.

Usage

HTML
<!-- Collect a $50 payment -->
<mediaos-simple-payment amount="50" description="Sponsorship deposit"></mediaos-simple-payment>

<!-- Store a card on file only -->
<mediaos-simple-payment is-save-payment-info-only="true"></mediaos-simple-payment>

Props

Prop	Type	Default	Required	Description
`amount`	number	—	optional	Amount to charge.
`description`	string	""	optional	Order description shown to the payer and stored on the transaction.
`allow-save-payment-info`	boolean	true	optional	Offer to save the card for future purchases.
`is-save-payment-info-only`	boolean	false	optional	Store the payment method without charging anything.
`can-checkout`	boolean	true	optional	Enable the pay button. Set `false` while your own validation is incomplete.
`disable-password`	boolean	false	optional	Do not ask a new payer to create a password.
`url`	string	"ecommerce/ajax/simpleCheckout.php"	optional	Override the endpoint that processes the payment.

Events

<mediaos-event-calendar>

Interactive event calendar

▼

Description

Displays a full interactive calendar of events from MediaOS. Supports month/list views and event detail popups. Set a height via inline styles for best results.

Usage

HTML
<mediaos-event-calendar directory-id="4" style="height:500px;"></mediaos-event-calendar>

Props

Prop	Type	Default	Required	Description
`directory-id`	number	—	required	The MediaOS event directory ID whose events the calendar displays.
`height`	string	"100%"	optional	CSS height of the calendar. Give the element a fixed height for best results.

<mediaos-event-checkout>

Ticket-buying wizard for one event

▼

Description

A complete ticket purchase wizard for a single event: pick tickets → add-ons (only shown when the event has upsell offers) → optional custom form → checkout → confirmation. The buyer's entered details survive Back navigation, and the confirmation stays on screen after the cart empties.

Usage

HTML
<!-- Standard ticket grid -->
<mediaos-event-checkout event-id="88"></mediaos-event-checkout>

<!-- Pricing-tier columns with an early-bird countdown -->
<mediaos-event-checkout
  event-id="88"
  display="tiers"
  countdown="true"
  form-id="12">
</mediaos-event-checkout>

Props

Prop	Type	Default	Required	Description
`event-id`	number\|string	—	required	The MediaOS event (publication) ID to sell tickets for.
`display`	string	"store"	optional	`store` shows the default product grid; `tiers` shows pricing-tier columns.
`countdown`	boolean	false	optional	Adds a countdown timer when a price deadline is within 7 days. Tier display only.
`form-id`	string	null	optional	MediaOS form collected as a step in the wizard (attendee details, dietary needs, etc.).

<mediaos-event-schedule>

Agenda / session schedule

▼

Description

Displays an event's session agenda grouped by day, with track filtering, expandable session details, and event/track sponsor placements.

Usage

HTML
<mediaos-event-schedule event-id="88"></mediaos-event-schedule>

Props

Prop	Type	Default	Required	Description
`event-id`	number\|string	null	optional	The event ID whose schedule to load. Friendlier alias for `publication-id`.
`publication-id`	number\|string	null	optional	Same as `event-id` — the underlying publication ID.

<mediaos-event-speakers>

Speaker grid with bio pop-ups

▼

Description

Shows an event's speaker line-up as a photo grid (initials are used when no headshot exists). Clicking a speaker opens their full bio and sessions.

Usage

HTML
<mediaos-event-speakers event-id="88"></mediaos-event-speakers>

Props

Prop	Type	Default	Required	Description
`event-id`	number\|string	null	optional	The event ID whose speakers to load. Friendlier alias for `publication-id`.
`publication-id`	number\|string	null	optional	Same as `event-id` — the underlying publication ID.

<mediaos-floor-plan-viewer>

Interactive booth / floor plan map

▼

Description

Renders an interactive, pan-and-zoom floor plan for an expo or event. Booths can be highlighted or focused from your own page code, and sold/available status comes straight from MediaOS. Use the site-token mode (id) on an authenticated publisher site, or the public share-link mode (public-token + account-id) anywhere else.

Usage

HTML
<!-- Standard embed on a publisher site -->
<mediaos-floor-plan-viewer id="42" height="700px"></mediaos-floor-plan-viewer>

<!-- Zoom straight to a booth -->
<mediaos-floor-plan-viewer id="42" focus-location-id="1180"></mediaos-floor-plan-viewer>

<!-- Public share link (no site token) -->
<mediaos-floor-plan-viewer public-token="abc123" account-id="7"></mediaos-floor-plan-viewer>

Props

Prop	Type	Default	Required	Description
`id`	number\|string	null	optional	Product ID of the floor plan (site-token authenticated mode).
`height`	string	"100%"	optional	CSS height of the viewer.
`mode`	string	"view"	optional	Viewer behavior mode.
`highlight-location-id`	number\|string	null	optional	Pulse/highlight this booth and pan to it.
`focus-location-id`	number\|string	null	optional	Zoom to this booth and open its detail card.
`focus-nonce`	number\|string	0	optional	Increment to re-trigger `focus-location-id` for the same booth.
`public-token`	string	null	optional	Public share-link token. Bypasses site-token auth; must be paired with `account-id`.
`account-id`	number\|string	null	optional	MediaOS account ID, required with `public-token`.

Publications

Digital edition reading experiences for print publications.

<mediaos-flip-book>

Digital edition flip-book reader

▼

Description

A page-flipping digital edition reader with spreads, zoom, thumbnails, table of contents, full-screen, and touch/swipe support. When no id is supplied it opens as an issue library so readers can browse and pick an issue; supplying site-id or publication-id limits which issues the library offers.

Usage

HTML
<!-- Open one issue directly -->
<mediaos-flip-book id="310"></mediaos-flip-book>

<!-- Issue library limited to one publication -->
<mediaos-flip-book publication-id="4"></mediaos-flip-book>

Props

Prop	Type	Default	Required	Description
`id`	number\|string	""	optional	Issue ID to open. Omit to show the browsable issue library instead.
`publication-id`	string	""	optional	Limit the library to issues of one publication.
`site-id`	string	""	optional	Limit the library to issues belonging to one site.

Forms

<mediaos-form>

Custom form embed

▼

Description

Renders any form built in the MediaOS form builder. Supports redirect-on-submit, pre-filling fields via object-id, and optional payment steps.

Usage

HTML
<mediaos-form id="11"></mediaos-form>

<!-- With redirect after submit -->
<mediaos-form
  id="11"
  redirect-url="https://example.com/thank-you">
</mediaos-form>

Props

Prop	Type	Default	Required	Description
`id`	number	null	required	The MediaOS form ID to render.
`redirect-url`	string	null	optional	URL to redirect to after the form is successfully submitted.
`object-id`	number	null	optional	Pre-fill form fields from an existing MediaOS object (e.g., a business profile).
`is-checkout`	boolean	false	optional	Render the form as a checkout step — the parent checkout collects the submission instead of the form submitting on its own.
`show-headline`	boolean	false	optional	Render the form's headline above it. Website embeds normally leave this off and supply their own heading; the hosted pages shell turns it on.

Forum & Comments

Add community discussion features — article comments, full forum home, and group pages.

<mediaos-comment-feed>

Threaded comment feed

▼

Description

Displays a threaded list of comments for a specific post or group, with the ability to post new comments (requires login).

Usage

HTML
<!-- Comments for a specific post -->
<mediaos-comment-feed post-id="42"></mediaos-comment-feed>

<!-- Group discussion -->
<mediaos-comment-feed group-id="5" is-forum="true"></mediaos-comment-feed>

Props

Prop	Type	Default	Required	Description
`post-id`	number	—	optional	WordPress/MediaOS post ID to load comments for.
`group-id`	number	—	optional	Group ID for forum/group discussions.
`contact-id`	number	—	optional	Filter comments by a specific contact/author.
`is-forum`	boolean	—	optional	Enable forum-specific display and UI.
`can-new-post`	boolean	true	optional	Show the "New Post" / "New Comment" compose area.
`type`	string	—	optional	Restrict the feed to a single post type.
`search-text`	string	—	optional	Pre-filter the feed to posts matching this search text.

<mediaos-comments>

Article comments section

▼

Description

Lightweight comments component for embedding below articles. Reads the current post ID from the page meta tag automatically when no comment-id is specified.

Usage

HTML
<mediaos-comments></mediaos-comments>

Props

Prop	Type	Default	Required	Description
`comment-id`	number	null	optional	Load a specific comment thread by ID.
`group-id`	number	null	optional	Scope to a specific group.
`show-comments`	boolean	false	optional	Expand the comment thread by default.

<mediaos-forum-home>

Full forum home page

▼

Description

The complete community forum home — includes tabbed navigation for news, groups, members, and newsletter management.

Usage

HTML
<mediaos-forum-home style="height:600px;"></mediaos-forum-home>

Props

Prop	Type	Default	Required	Description
`default-tab`	string	"news"	optional	Tab shown on load: `news`, `groups`, `members`, or `newsletters`.
`height`	string	null	optional	CSS height for the forum container (e.g. `"600px"`).
`style`	string	null	optional	Inline CSS applied to the forum wrapper.

<mediaos-groups>

Community groups directory

▼

Description

Displays a directory of community groups that users can browse and join. Requires login to join a group.

Usage

HTML
<mediaos-groups></mediaos-groups>

No configurable props.

Newsletters

Subscribe visitors, let users manage their subscriptions, embed inline subscribe forms within articles, and browse newsletter archives.

<mediaos-newsletter-subscribe>

Newsletter subscribe form

▼

Description

A compact sign-up form for newsletter subscriptions. Optionally auto-subscribes to specific newsletter IDs and supports email verification bypass for trusted contexts.

Usage

HTML
<mediaos-newsletter-subscribe></mediaos-newsletter-subscribe>

<!-- Auto-subscribe and redirect -->
<mediaos-newsletter-subscribe
  newsletter-ids="3,7"
  redirect-url="https://example.com/subscribed"
  skip-verify="true">
</mediaos-newsletter-subscribe>

Props

Prop	Type	Default	Required	Description
`redirect-url`	string	null	optional	URL to redirect the visitor to after successful subscription.
`newsletter-ids`	string	null	optional	Comma-separated newsletter IDs to auto-subscribe the user to.
`skip-verify`	boolean	false	optional	Skip the email confirmation step (reduces spam protection).
`skip-name`	boolean	false	optional	Hide the first/last name fields (email only).
`sso-enabled`	boolean	true	optional	Show SSO (Google, etc.) sign-in options in the form.

<mediaos-newsletter-article-form>

Inline article subscribe prompt

▼

Description

Automatically injects a newsletter subscribe form after the first quarter of an article's paragraphs. The form only shows to non-logged-in users. Point it at your article container using article-id or article-class.

Usage

HTML
<!-- The form will inject itself into the article -->
<mediaos-newsletter-article-form
  article-id="my-article-content"
  title="Stay in the loop!"
  text="Get our latest stories delivered to your inbox."
  newsletter-ids="3"
  redirect-url="https://example.com/thanks">
</mediaos-newsletter-article-form>

<div id="my-article-content">
  <!-- Your article paragraphs -->
</div>

Props

Prop	Type	Default	Required	Description
`article-id`	string	—	optional	HTML `id` of the article container element.
`article-class`	string	—	optional	CSS class of the article container element (alternative to `article-id`).
`title`	string	"Subscribe to our Newsletter!"	optional	Heading text displayed on the inline form.
`text`	string	"We promise not to spam you."	optional	Sub-heading / description text on the form.
`redirect-url`	string	null	optional	URL to redirect after subscribing.
`newsletter-ids`	string	null	optional	Comma-separated newsletter IDs to subscribe to.
`skip-verify`	boolean	false	optional	Skip the email confirmation step.

<mediaos-newsletter-archive>

Past newsletter archive

▼

Description

Displays a browsable archive of past newsletter editions, grouped by year. Supports viewing individual newsletter HTML directly in the component.

Usage

HTML
<mediaos-newsletter-archive></mediaos-newsletter-archive>

<!-- Filter to a specific newsletter -->
<mediaos-newsletter-archive id="3" start-year="2022"></mediaos-newsletter-archive>

Props

Prop	Type	Default	Required	Description
`id`	number	null	optional	Filter to a specific newsletter by ID.
`start-year`	number	current year	optional	The earliest year to display in the archive.

News Bites

<mediaos-news-bite-display>

Short-form news feed

▼

Description

Displays a multi-column feed of short-form "news bite" posts. Supports category filtering, image display, and opening articles in a new tab.

Usage

HTML
<mediaos-news-bite-display columns="3" items-per-column="4"></mediaos-news-bite-display>

Props

Prop	Type	Default	Required	Description
`columns`	number	1	optional	Number of columns to display.
`items-per-column`	number	5	optional	Number of news bites per column.
`category-ids`	array	[]	optional	Array of category IDs to filter bites.
`show-images`	boolean	true	optional	Display thumbnail images with each bite.
`show-date`	boolean	true	optional	Show the published date on each bite.
`business-profile-id`	string	null	optional	Filter bites by a specific business directory profile.
`open-in-new-tab`	boolean	false	optional	Open article links in a new browser tab.

Paywall

Control content access with metered paywalls, landing pages, and page-view counters.

<mediaos-landing-page>

Paywall / landing page

▼

Description

Renders a MediaOS-configured paywall landing page. Supports template variables for dynamic page view counts ({{pageViewsLeft}}, {{totalPageViews}}, {{pageViewsUsed}}).

Usage

HTML
<mediaos-landing-page id="26"></mediaos-landing-page>

Props

Prop	Type	Default	Required	Description
`id`	number	—	required	The MediaOS landing page ID to display.
`page-views-left`	number	null	optional	Remaining free page views — injected into template variables.
`total-page-views`	number	null	optional	Total allowed free page views — injected into template variables.

<mediaos-page-views-left>

Free page view counter (nav bar)

▼

Description

Shows the current user's remaining free page views in a compact nav-bar-friendly widget. Designed to be placed inline in your site header.

Usage

HTML
<mediaos-page-views-left height="50"></mediaos-page-views-left>

Props

Prop	Type	Default	Required	Description
`height`	number	40	optional	Height of the widget in pixels (matches nav bar height).
`styles`	string	null	optional	Inline CSS applied to the widget so it can inherit your nav bar's colors and font.

Perks

<mediaos-perks>

Member perks listing

▼

Description

Displays the member perks catalog — discounts and benefits provided by local businesses to your site's members.

Usage

HTML
<mediaos-perks></mediaos-perks>

No configurable props. Perks are loaded from the MediaOS account configuration.

Polls

<mediaos-poll>

Audience poll

▼

Description

Embeds a single-question poll with real-time results. Requires the user to be logged in to vote. Supports post-vote redirect or a landing page overlay.

Usage

HTML
<mediaos-poll
  id="5"
  title="What's your favorite feature?"
  redirect-url="https://example.com/results">
</mediaos-poll>

Props

Prop	Type	Default	Required	Description
`id`	number	""	optional	The MediaOS poll ID. If omitted, options must be provided directly.
`title`	string	""	optional	Poll question / heading text.
`sub-title`	string	""	optional	Sub-heading text shown below the question.
`redirect-url`	string	""	optional	Redirect the user here after voting.
`on-answer-action`	string	""	optional	What happens after a vote: `displayResults`, `displayMessage`, `displayPage` (with `display-landing-page-id`), or `redirect` (with `redirect-url`).
`token`	string	""	optional	Signed vote token — used when the poll is opened from an email or another one-click voting link so the vote is attributed without a login.
`display-landing-page-id`	number	""	optional	Show a MediaOS landing page after voting instead of redirecting.
`options`	string	""	optional	URL-encoded JSON array of poll option objects (used when not loading from a saved poll ID).

Revenue Tools

<mediaos-sponsor-tiers>

Sponsor logo wall by tier

▼

Description

Renders a sponsor logo grid organized by sponsorship tier level. Pulls sponsor data from a MediaOS product configuration.

Usage

HTML
<mediaos-sponsor-tiers product-id="10"></mediaos-sponsor-tiers>

Props

Prop	Type	Default	Required	Description
`product-id`	number	1	required	The MediaOS product ID for the sponsorship tiers.
`color`	string	"#000000"	optional	Text color used in the sponsor display.

Support

<mediaos-ticket-chat>

Support ticket chat widget

▼

Description

A collapsible chat widget tied to a MediaOS support ticket. Allows users to send messages and receive replies in real time. Polls for new messages automatically.

Usage

HTML
<mediaos-ticket-chat id="123"></mediaos-ticket-chat>

Props

Prop	Type	Default	Required	Description
`id`	string	—	required	The support ticket ID to load the chat for.
`collapsed`	boolean	false	optional	Start the widget collapsed; the visitor expands it to chat.

<mediaos-tickets-list>

The signed-in user's support tickets

▼

Description

Lists every support ticket belonging to the signed-in contact, with search. Selecting a ticket opens its conversation. Anonymous visitors are shown the login form instead.

Usage

HTML
<mediaos-tickets-list></mediaos-tickets-list>

No configurable props. Tickets are loaded for the currently authenticated contact.

User / Authentication

Login, registration, SSO, and user menu components for adding authentication to any page.

<mediaos-user-menu>

User nav bar widget

▼

Description

A compact login/profile dropdown for the navigation bar. Shows a user avatar and name when logged in, or a sign-in prompt when logged out.

Usage

HTML
<!-- In your navigation bar -->
<mediaos-user-menu height="50" icon-height="30"></mediaos-user-menu>

Props

Prop	Type	Default	Required	Description
`height`	string	"30"	optional	Height of the widget in pixels — should match your nav bar height.
`icon-height`	string	"17"	optional	Height of the user avatar icon in pixels.
`font-size`	string	"18"	optional	Font size (in px) for the displayed user name.
`font-color`	string	"#000000"	optional	CSS color for the user name text.
`register-header`	string	"Not a member?"	optional	Heading shown in the register panel.
`register-text`	string	"Sign up for…"	optional	Body text shown in the register panel.
`register-button-text`	string	"Join now, it's FREE!"	optional	Label for the register call-to-action button.
`login-header`	string	"Welcome Back!"	optional	Heading shown on the login panel.
`login-text`	string	"Sign in to your account…"	optional	Body text shown on the login panel.
`login-button-text`	string	"Sign In"	optional	Label for the sign-in button.
`login-text-styles`	string	null	optional	Inline CSS applied to the signed-out "Sign In" text so it can match your nav bar exactly.

<mediaos-login-form>

Standalone login form

▼

Description

A full login form with email/password fields, forgot-password flow, and SSO options. Can be embedded on a dedicated login page.

Usage

HTML
<mediaos-login-form></mediaos-login-form>

<!-- Reload page after login -->
<mediaos-login-form reload="true"></mediaos-login-form>

Props

Prop	Type	Default	Required	Description
`reload`	boolean	false	optional	If `true`, reloads the current page after a successful login.

<mediaos-register-form>

New user registration form

▼

Description

A full registration form that creates a new MediaOS contact. Includes name, email, password fields, and SSO options. Automatically subscribes the user to the configured newsletter if set in account settings.

Usage

HTML
<mediaos-register-form></mediaos-register-form>

Props

Prop	Type	Default	Required	Description
`label`	string	"Register"	optional	Label for the submit button.

<mediaos-sso>

Single Sign-On buttons

▼

Description

Renders configured SSO provider buttons (Google, Microsoft, LinkedIn) based on your MediaOS account settings. Only shows buttons for providers that have been configured. To log in a user from your own system, use window.MediaOS.UserSsoJwt(jwt).

Usage

HTML
<mediaos-sso></mediaos-sso>

<!-- Force 2-column layout -->
<mediaos-sso columns="2"></mediaos-sso>

Props

Prop	Type	Default	Required	Description
`columns`	string	null	optional	Maximum number of SSO button columns. Auto-adjusts to fit available providers.

Programmatic SSO

JavaScript – log in a user via JWT
// Call after the MediaOS script has loaded
window.MediaOS.UserSsoJwt('eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9...');

<mediaos-portal-access>

Passwordless "email me a link" access

▼

Description

A single email field that sends the visitor a secure sign-in link to their MediaOS account area — no password needed. Useful for exhibitors, advertisers, and members who never set a password. The confirmation message is always neutral, so the form cannot be used to test which email addresses exist.

Usage

HTML
<mediaos-portal-access></mediaos-portal-access>

<!-- Land the emailed link in a specific event's Exhibitor Hub -->
<mediaos-portal-access event-id="88" title="Exhibitor Login"></mediaos-portal-access>

Props

Prop	Type	Default	Required	Description
`event-id`	number\|string	null	optional	Land the emailed link in this event's Exhibitor Hub.
`title`	string	""	optional	Heading shown above the email field.

MediaOS Embed Reference

Getting Started

Installation

JavaScript API

Triggering Workflows via JavaScript

URL Actions

Authentication Actions

Account Panel Actions

Other Actions

Notes

Hosted Pages

Routes

Notes

Data Privacy & Consent (GDPR / CPRA)

GDPR Cookie Consent

Tracking Consent (CPRA / Consent Mode)

The Consent Interface

The MediaOS.Consent Object

Global Privacy Control (GPC)

Notes

Advertising

Description

Usage

Props

Description

Usage

Props

Best of Voting

Description

Usage

Props

Description

Usage

Description

Usage

Props

Bookmarks

Description

Usage

Props

Description

Usage

Classifieds

Description

Usage

Props

Content

Description

Usage

Props

Description

Usage

Props

Description

Usage

Props

Description

Usage

Description

Usage

Props

Business Directory

Description

Usage

Props

Description

Usage

Props

Description

Usage

Description

Usage

Props

Description

Usage

Props

Description

Usage

Props

Description

The `MediaOS.Consent` Object