How to Install A Moast Widget Using an Embed Code

Use the widget editor's generated Liquid code for Shopify themes and product pages, or generated HTML code for page builders and external pages.

Carousel

Copy and paste this code into a Custom HTML section on any page:

The moast-carousel element accepts the following options for you to customize the look and functionality of your player in the same way you do from the theme editor.

Properties

Some features are only available in the Pro plan. If your store is using the Free plan, the property will not apply.

Filtering by product

• To show media for one specific product, you can add the product ID to the embed code. This tells the widget to only display videos or photos tagged with that product.

HTML

<moast-carousel
  product="1234567"
></moast-carousel>

• If you're adding the widget to a Liquid template like product.liquid, you can insert it dynamically so it automatically shows the right videos for each product. For example, if a video is tagged with Product A, it will only appear on Product A’s product page.

HTML

<moast-carousel
  product="{{ product.id }}"
></moast-carousel>

How to Use a Custom Feed in the Embed Code

If you’re using Moast with an embed code, you can control which Feed appears by adding your Feed ID directly into the code.

Follow these steps:

1. Find Your Feed ID

• Go to Feeds in your Moast dashboard.

• Click the feed you want to use.

• In your browser URL bar, copy the Feed ID (the long string of letters and numbers in the URL).

It will look something like this: 6d471444-1d25-4927-b301-e44f271950e5
​

2. Add the Feed ID to Your Embed Code

In your embed code, add this attribute:

feed="INSERT FEED ID HERE"

For example:

<moast-carousel
  feed="6d471444-1d25-4927-b301-e44f271950e5"
  autoplay
  show-likes
  show-share
  mute-player
></moast-carousel>

That’s it. Once you add the feed attribute with your Feed ID, the widget will only display the media inside that specific Feed.

CSS Variables

The player exposes a few CSS variables that can be tweaked. The following are the default values:

CSS

--moast-padding-top: 40px;
--moast-padding-bottom: 40px;
--moast-slide-spacing: 16px;
--moast-slide-rounding: 20px;
--moast-slide-size: 250px;
--moast-border: 0px;
--moast-border-color: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);

Add them to the player in a style tag to modify them:

HTML

<script src="/apps/moast/embed/carousel.js" async type="module"></script>
<moast-carousel
 style="
    --moast-padding-top: 0px;
    --moast-padding-bottom: 0px;
    --moast-slide-spacing: 8px;
    --moast-slide-rounding: 0px;
    --moast-slide-size: 200px;
    --moast-border: 2px;
    --moast-border-color: #000000;
  "
></moast-carousel>

Example of a Customized Player

The following would display a player whose videos would autoplay; with product cards on the slides; display likes and share on the player; open the products as links; sort the slides by the order set in the feed view; open the player in a floating view in the bottom left; and autoscroll the slides every 6s.

📌 If you need help installing the carousel using our embed code, our team’s here to help! Reach out via chat or email.

Pop-Up (Floating)

The Pop-Up (Floating player) is only accessible on the pro plan.

Copy and paste this code into a Custom HTML section on any page:

<script src="/apps/moast/embed/floating.js" async type="module"></script> 
<moast-floating></moast-floating>

The moast-floating element accepts the following options for you to customize the look and functionality of your player in the same way you do from the theme editor.

Properties

Filtering by product

To only display the media associated to a single product, you can pass the product attribute, and give the a product handle:

HTML

<moast-floating
  product="my-product-handle"
></moast-carousel>

• If you’re adding it to a template that supports Liquid, like a product.liquid template, you can add it dynamically with:

HTML

<moast-floating
  product="{{ product.handle }}"
></moast-carousel>

CSS Variables

The player exposes a few CSS variables that can be tweaked. The following are the default values:

CSS

--moast-slide-rounding: 20px;

Add them to the player in a style tag to modify them:

HTML

<script src="/apps/moast/embed/floating.js" async type="module"></script>
<moast-floating
  style="
    --moast-slide-rounding: 0px;
  "
></moast-floating>

Example of a customized player

The following would display a floating widget that would appear after 10 seconds; display likes and share on the player; open the products as links; sort the slides by the order set in the feed view; open the player in a floating view in the bottom left in a small size.

HTML

<script src="/apps/moast/embed/floating.js" async type="module"></script>
<moast-floating
  delay="10"
  show-likes
  show-share
  buy-action="link"
  sort="manual"
  float-location="bottom-left"
  float-size="small"
></moast-floating>

📌 If you need help installing the Pop-Up (Floating Player) using our embed code, our team’s here to help! Reach out via chat or email.

Copy the current embed code

Copy the code from the widget editor so Moast includes the correct widget and shop information.

1. Open the widget in the Moast editor.

2. Click Embed in the preview or publish toolbar.

3. Choose Copy Liquid code for a Shopify theme or product page.

4. Choose Copy HTML code for a page builder or external page.

Use the current Floating widget labels

The current widget type is Floating. Its editor includes Open player, Floating player position, Floating player size, Advanced, and Custom CSS. Floating widgets are gated by the Pro app-block feature.

A successful copy shows Liquid code copied to clipboard or HTML code copied to clipboard. If copying fails, Moast shows Failed to copy code. Please try again.