# Invest Page Builder

Each offering has a public-facing investor **Invest Page** that you can fully customize. The Invest Page Builder is located on the **Invest Page** tab of an offering’s detail page in the admin interface. Use this interface to configure which sections appear, add or edit content, apply your brand styling, and then click **Save Invest Page** to publish your changes.

## Section Management

At the top of the Invest Page tab, you’ll see a list of available sections. You can:

1. Enable or disable sections by toggling the checkbox next to each section name.
2. Reorder sections by dragging the “handle” icon on the left up or down.
3. Configure section-specific settings (where applicable) using the gear icon next to each section.

The full list of available sections includes:

* Key Stats
* Token Details
* About (project description)
* Documents (offering documents)
* Links (external resources)
* Tokenomics (allocation breakdown or discounts)
* Token Lifecycle (vesting schedules, distribution options, trading channels)
* Bond Details (coupon schedules, maturity dates, etc.)
* Rich Text (custom HTML content)
* FAQ (frequently asked questions)
* Video (embed a video by URL)
* Team Members
* Roadmap

Sections such as Tokenomics, Token Lifecycle, Bond Details, Rich Text, FAQ, and Video are disabled by default; enable them as needed. When you have finished configuring sections, click **Save Invest Page** at the top or bottom of the tab. Your changes are published immediately.

## About This Offering

Add a text description of your project or offering. This appears prominently under the **About this Offering** heading. Use this field to:

* Support plain text with line breaks.
* Explain what the token represents, the purpose of the offering, and why investors should participate.
* Keep it clear, concise, and compelling.

After editing, click **Save Invest Page** to apply your updates.

## Links

Add clickable pills linking to external resources related to your project. Common examples:

* Company website
* Litepaper or whitepaper
* Twitter / X profile
* LinkedIn page
* Telegram group

1. Click **Add Link**.
2. Enter a **Label** and **URL**.
3. When finished, click **Save Invest Page** to publish the link.
4. To remove a link, click the delete icon next to it and then click **Save Invest Page**.

## Team Members

Showcase the people behind your project. For each team member, provide:

* **Name** — Full name of the team member.
* **Role** — Title or position (e.g., “CEO”, “CTO”).
* **Bio** — A short description of background or responsibilities.
* **Avatar URL** — Link to a profile photo (optional). If omitted, an initial is shown.
* **LinkedIn URL** — Link to the member’s LinkedIn profile (optional).

To manage team members:

1. Click **Add Member**.
2. Fill in the fields for each person.
3. When done, click **Save Invest Page**.
4. To remove a member, click the delete icon next to their entry and then **Save Invest Page**.

## Roadmap

Display project milestones as a vertical timeline. Each item includes:

* **Title** — Milestone description (e.g., “Token Launch”).
* **Date** — Planned or completed date (free text, e.g., “Q2 2026”).
* **Done** — Check the box for completed milestones.

Use **Add Item** to create new milestones or the delete icon to remove them. After making changes, click **Save Invest Page**. Completed items show a green checkmark; upcoming items appear in grey.

## Tokenomics

Provide a breakdown of token allocation, discounts, or tiered pricing:

* **Label** — Name of the entry (e.g., “Founding Round”).
* **Percentage** — Share of total supply or discount rate.

Click **Add Entry**, fill in the details, and then click **Save Invest Page**. Remove entries with the delete icon and save.

## Token Lifecycle

Configure how tokens vest, distribute, and trade:

* **Vesting** — Enable and define cliff dates, vesting intervals, and amounts.
* **Distribution** — Choose between airdrop or claim flow, set estimated claim dates and a claim URL.
* **Trading** — Enable DEX, CEX, or OTC channels; specify exchange names and proceeds percentages.

Enable the section, click the gear icon to open settings, adjust each sub-feature, and then click **Save Invest Page**.

## Bond Details

If your offering is a bond, provide:

* Coupon payment schedule
* Interest rate or yield
* Maturity date

Enable **Bond Details**, complete the fields in the settings pane, and click **Save Invest Page**.

## Rich Text

Add a custom HTML or rich-text block anywhere on the page:

1. Enable **Rich Text** and click the gear icon.
2. Enter a **Title**.
3. Paste your **Content** (rich text or HTML).
4. Click **Save Invest Page** to display a styled content block on the Invest Page.

## FAQ

Answer common investor questions:

* **Question** — The question you wish to answer.
* **Answer** — The corresponding response.

Enable **FAQ**, click **Add FAQ Item** to add entries, fill in the fields, and then click **Save Invest Page**. Remove items with the delete icon and save.

## Video

Embed a video to highlight your project:

* **URL** — Link to the video (e.g., YouTube or Vimeo).
* **Title** — Display title for the video section.

Enable **Video**, click the gear icon, enter the details, and click **Save Invest Page** to show an embedded player.

## Branding

Customize the visual style of your Invest Page under **Branding**:

* **Logo** — Upload an image file. Appears in the navigation bar and hero section.
* **Primary Color** — Main brand color for gradients, buttons, and accents (hex code).
* **Secondary Color** — Complementary accent color (hex code).
* **Font** — Google Font name (default is “Inter”).
* **Theme** — Light or dark mode for backgrounds and text.
* **Hero Gradient End** — Hex color for the end of the hero gradient.
* **Card Background Color** — Background color for stats, document links, and cards.
* **Accent Text Color** — Color for section headers and highlights.
* **Hero Font Color** — Color for text in the hero section.
* **CTA Font Color** — Color for button text across the page.
* **Hero Media** — Choose **Image** or **Video**, then enter the **Hero Media URL**.
* **Favicon URL** — Link to a favicon for display in browser tabs.

Adjust values in the branding pane and click **Save Invest Page** to apply styling updates immediately.

## Search & AI Discoverability

Control whether search engines and AI assistants index your offering, and set a canonical URL for external marketing pages.

1. Locate the **Search & AI Discoverability** card on the Invest Page tab.
2. If organization-wide discoverability is disabled in your Organization settings, a warning appears and the per-offering setting is locked. You must enable discoverability at **Organization settings** before changing this offering’s indexing.
3. Check **Allow indexing for this offering** to permit search engines and AI assistants to include your Invest Page in search results and AI answers.
4. (Optional) Enter an **External canonical URL** if you embed this Invest Page on your marketing site. Search engines will treat that URL as the primary source. The URL must start with `http://` or `https://`.
   * If the URL does not start with `http://` or `https://`, an inline error appears and you must correct it before saving.

Click **Save Invest Page** to apply these settings.

## Saving Changes

After editing any section or style, use the **Save Invest Page** button at the top or bottom of the tab. Your updates go live on the investor-facing page as soon as you save.

## What Investors See

The Invest Page combines all enabled sections into a polished, conversion-optimized experience:

* A **hero section** with your offering name, token details, price per token, a live countdown timer, and progress bar.
* Custom **hero media** (image or video) and brand colors.
* An **Invest Now** call-to-action button with your chosen CTA text color.
* **Key stats** showing minimum and maximum investment, sale close date, and accepted payment methods:
  * Bank transfer (SEPA/wire)
  * Card payments via [Checkout.com](https://www.checkout.com)
  * Crypto payments via [Coinbase Commerce](https://www.coinbase.com/commerce)
  * Direct on-chain stablecoin payments
* Investor wallet options: bring your own wallet or use a custodial wallet provided by the issuer via [Tangany](https://tangany.com).
* **Project description**, links, and offering documents.
* Optional sections such as Tokenomics, Token Lifecycle, Bond Details, Rich Text, FAQ, Team Members, Video, and Roadmap.
* Support for **KYC checks** powered by [Sumsub](https://sumsub.com) or [Blockpass](https://www.blockpass.org).
* **Multi-chain wallet** support (EVM, Solana, and other networks).
* Investor **portfolio widget** for tracking holdings.
* Your **favicon** displayed in the browser tab.

## Embeddable Widgets

In addition to the Invest Page, you can embed Offering Manager widgets directly on your own website. Navigate to the **Embed Widgets** tab in the admin interface to get code snippets and direct links for:

* **Checkout Widget** — A full purchase flow for your offering.
* **Investment Card Widget** — A compact card with offering details and an **Invest** button.
* **Portfolio Widget** — Displays an investor’s holdings and activity.

Each snippet includes your subdomain, slug, and any custom brand settings (colors, fonts, theme, hero font, CTA font). Use the **Copy** button to copy the embed code or click **Open in new tab** to view the direct link.

Example code for the Checkout Widget:

```html
<!-- Offering Manager Checkout Widget -->
<div data-om-widget="checkout"
     data-om-subdomain="your-subdomain"
     data-om-slug="your-offering-slug"
     data-om-color="#1d4ed8"
     data-om-secondary-color="#c7d2fe"
     data-om-font="Inter"
     data-om-theme="light"
     data-om-hero-font-color="#ffffff"
     data-om-cta-font-color="#ffffff">
</div>
<script src="https://om.bitbond.com/om-widget.js"></script>
```

The `div` attributes configure the widget type, your subdomain, and offering slug. Any additional `data-om-*` attributes override branding values.

For the Investment Card Widget:

```html
<!-- Offering Manager Investment Card Widget -->
<div data-om-widget="invest-card"
     data-om-subdomain="your-subdomain"
     data-om-slug="your-offering-slug"
     <!-- optional branding attributes -->
>
</div>
<script src="https://om.bitbond.com/om-widget.js"></script>
```

And for the Portfolio Widget:

```html
<!-- Offering Manager Portfolio Widget -->
<div data-om-widget="portfolio"
     data-om-subdomain="your-subdomain"
     <!-- optional branding attributes -->
>
</div>
<script src="https://om.bitbond.com/om-widget.js"></script>
```

You can also use the direct links to the widgets:

* Checkout Widget: `<https://om.bitbond.com/invest/your-subdomain/your-offering-slug/checkout?primaryColor=...&font=...>`
* Investment Card Widget: `<https://om.bitbond.com/invest/your-subdomain/your-offering-slug/widget?primaryColor=...&font=...>`
* Portfolio Widget: `<https://om.bitbond.com/invest/your-subdomain/portfolio/widget?primaryColor=...&font=...>`

For more details on available data attributes and styling options, see the Embed Widgets section in the admin UI.

For details on the full investor experience, see [Investor Experience](https://docs.bitbond.com/asset-tokenization-suite/offering-manager/investor-experience.md).\
Consult the interactive public API documentation at <https://om.bitbond.com/api/docs>.\
The Offering Manager homepage is <https://om.bitbond.com>.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bitbond.com/asset-tokenization-suite/offering-manager/invest-page-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.