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 – 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.

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.
`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).

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).

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	Default	Covers
`analytics`	`granted`	First-party page-view / dwell-time measurement.
`advertising`	`denied`	Personalized ads and ad measurement.
`saleOrShare`	`denied`	Sale or sharing of personal information with third parties (CPRA §1798.135).

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 CPRA opt-out: advertising and saleOrShare are forced to denied and cannot be overridden — even by GrantConsent(). 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.

Notes

Consent choices are persisted in namespaced localStorage and survive page loads.
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.
`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.

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.
`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.

<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.
`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.

<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.

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.

<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>

No configurable props. The cart contents are managed globally via the MediaOS cart store.

<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.

<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.

<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.

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 style="height:500px;"></mediaos-event-calendar>

No configurable props. Events are automatically loaded from the configured MediaOS website.

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).

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.

<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`.

<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).

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.
`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.

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.

<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 Embed Reference

Getting Started

Installation

JavaScript API

Triggering Workflows via JavaScript

URL Actions

Authentication Actions

Account Panel Actions

Other Actions

Notes

Data Privacy & Consent (GDPR / CPRA)

GDPR Cookie Consent

Tracking Consent (CPRA / Consent Mode)

The MediaOS.Consent Object

Global Privacy Control (GPC)

Notes

Advertising

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

Donations & Fundraising

Description

Usage

Props

Description

Usage

Props

Description

The `MediaOS.Consent` Object