Components

Components are the visible building blocks of your Tip page. You drag them into slots, arrange them there, and configure them on the right through properties.

Working With Components

• Drag a component from the sidebar into a slot or insert it into the selected area.
• Select a component on the canvas to edit its properties.
• Components can be placed before, after, or inside a slot.
• Data components such as Goals, Payments, or Creator Links do not only show static content. They read from the matching Tip areas.
• Preview is live. Check changes directly in the preview tab, but save deliberately when they should appear on the public page.

Overview

Creator

Creator Avatar

The Creator Avatar shows your Twitch profile image as its own block. It works well in the hero area or as a visual anchor next to a short introduction.

Strengths:

• uses the creator profile image from your account
• can be used as a standalone visual block
• works well next to text, Creator Links, or CTA buttons

Text

Text (Title + Content)

This component is the default for explanatory content. It separates title and content cleanly and fits intro text, support notes, or short descriptions.

Strengths:

• clear structure through a separate title
• quick to edit
• easy to read in hero, info, or FAQ-like areas

Text (Content Only)

This component is a pure text block without a separate title. It is better when the section already has a heading or when you only need a short note.

Strengths:

• less visual weight than a title block
• good for small notes, microcopy, or explanatory text
• flexible inside existing layouts

HTML + CSS

HTML + CSS is the strongest freeform component in the Page Editor. You can add custom markup and CSS while using tokens such as {{creator.name}} or {{creator.link.{linkname}}}.

Strengths:

• ideal for custom blocks that standard components cannot represent exactly
• supports Tip tokens for dynamic content
• CSS is limited to the component so it does not override the whole page
• good for special layouts, badges, small info boxes, or custom link/text combinations

Security:

Tokens are documented under Tokens. Important for Creator Links: {{creator.link.{linkname}}} means {linkname} is replaced with the name of your link.

Table

The Table component is intended for structured content. It is useful when information does not work well as flowing text.

Strengths:

• rows and columns can be maintained directly in the editor
• good for price lists, rules, comparisons, or compact overviews
• can be visually matched to the rest of the page

Media

Media

Media is intended for visual content such as images, banners, or other media areas. It helps make a page less text-heavy and emphasize important areas.

Strengths:

• good for branding, banners, or visual separation
• strong in hero or promo areas
• can visually support text and CTA blocks

Goals

You create goals in Studio. In the Page Editor, they do not become visible automatically just because a goal is active. In each goal component, you choose which goal or goal group should be shown.

Goal Card

Goal Card shows one goal with progress. It is the best component when one specific goal should be the focus.

Strengths:

• clear single goal
• progress is immediately understandable
• good for hero areas or dedicated goal sections

Goal List

Goal List shows multiple goals in a list. It is useful when you want several goals visible at the same time.

Strengths:

• multiple active or selected goals at once
• clearer than several separate Goal Cards
• good for a dedicated goal section further down the page

Goal Stats

Goal Stats combines monthly amount and tipper count in a compact statistic.

Strengths:

• quick overview without taking much space
• good next to hero text, Support Box, or Creator Links
• makes activity visible without putting a single goal in the foreground

Amount Month

Amount Month shows the monthly amount as one metric.

Strengths:

• focused on one number
• good for compact stat rows
• works well with Tipper Count or Goal Stats

Tipper Count

Tipper Count shows the number of tippers as one metric.

Strengths:

• quickly shows community activity
• good as a social-proof element
• works especially well next to Amount Month

Payments

Support Box

The Support Box is the checkout entry point on your Tip page. It shows amounts, optionally a custom amount, inputs for name/message, and the button to start payment.

Strengths:

• direct payment action on the page
• amounts and copy are customizable
• can be connected to a goal
• supports the full Tip checkout logic

Important:

• For real payments, Stripe Connect must be ready under Account.
• Fees, status, and final amounts are available under Payments.
• If the Support Box is used on a page, the page should only go live after the payment flow has been checked.

Links

Creator Links

Creator Links shows the links you define under Creator Links. There you maintain URL, icon, color, and visibility. The component then decides how these active links are displayed on the page.

Strengths:

• central link management instead of duplicating links in the editor
• icons and colors come from your link settings
• display can be adjusted in the Page Editor
• good for socials, website, Discord, shops, or other creator destinations

If you want to adjust icons, icon rules are documented under Icons.

CTA Buttons

CTA Buttons is a custom button group for direct actions. Unlike Creator Links, these buttons are intended for concrete page actions.

Strengths:

• good for clear calls to action
• multiple buttons can be used in one group
• fits external targets, support notes, or important links
• more directly controllable than automatically loaded Creator Links

Layout

Divider

Divider adds a visible line between content. It helps separate sections clearly without creating a new large area.

Strengths:

• makes long pages easier to read
• separates topics visually
• more subtle than a new large section

Spacer

Spacer creates controlled space between components.

Strengths:

• improves rhythm and readability
• helpful when components otherwise feel too tight
• more precise than extra empty text blocks

Use Spacer deliberately. If a page needs too many spacers, the section structure or layout is usually the better lever.

Useful Combinations