Customizing your platform

Customize your platform, configure email services, and manage media

Customizing your platform

PUCK UI editor overview

Moments comes fully set up and ready to use, but you have complete control to customize your platform's home page through the PUCK UI editor—a visual, drag-and-drop editor that requires no coding.

What you can customize:

• Public home page (visible to everyone)

• Logged-in member home page (visible to authenticated members)

• Layout, components, and content

• Color themes across all pages

Accessing the editor

1. Log in to your Moments platform (yourname.moments.com)

2. Add /edit to the end of your home page URL

   • Example: yourname.moments.com/edit

3. Editor interface opens (only accessible to admin users)

Important: The /edit path is only accessible if you're logged in with an admin wallet. Other users will see a "page not found" error.

Using the PUCK editor

Left sidebar: Available components you can drag onto the page

Main area: Your page preview where you add and arrange components

Right sidebar: Component properties you can edit when a component is selected

How to edit:

1. Drag components from left sidebar onto the page

2. Click any component to select it

3. Edit properties in the right sidebar

4. Preview changes in real-time

5. Click Publish button (top right) to save and deploy

After publishing: Reload your Moments platform to see the updated version live.

---

Working with links in PUCK editor

Many components allow you to add call-to-action links for your community.

Internal links (pages on your Moments platform)

Use only the page path preceded by a forward slash.

Examples:

• Badges page: /badges

• Exclusive content: /content

• Leaderboard: /leaderboard

• Mint specific badge: /mint/1 (where "1" is the badge ID)

Why this format? Internal links open in the same tab, keeping users on your platform for a smoother experience.

External links

Use full URLs for links to external sites.

Examples:

• Secondary marketplace: https://opensea.io/collection/your-collection

• Merchandise store: https://yourstore.com

• Social media: https://twitter.com/yourhandle

External links typically open in a new tab depending on user's browser settings.

---

Customizing color theme

Applying your brand colors

The Theme component allows you to set color codes for all elements across all pages of your platform.

How to customize colors:

1. Add the Theme component to any editable page

2. Select the Theme component

3. Set color codes in the right sidebar for:

   • Background Color

   • Foreground Color

   • Primary Color

   • Primary Foreground Color

   • Border Color

4. Click Publish to save color changes

5. Remove the Theme preview component from the page

6. Click Publish again

Note: The Theme component is only for setting colors, not for display. After saving your colors, remove it from the page.

Your color choices apply across the entire platform, not just the page where you set them.