Create and Use Fragments (Widgets)

Overview

Fragments allow you to create reusable widgets or full-page components inside your app.

They can be used as:

• Embeddable components (added to pages as blocks)
• Full-page widgets

Fragments are generated using TNL’s AI agent, Dave, making it quick and easy to build dynamic content like countdown timers, banners, or custom widgets.

In addition to AI-generated fragments, developers can also build custom-coded fragments with access to app data, events, and external APIs.

---

Access Fragments

1. Go to Mobile Menu
2. Select Fragments
3. Click Create Fragment (top right)

---

Create a New Fragment

1. Name Your Fragment

Enter a name (e.g., Countdown Widget).

---

2. Choose Fragment Type

You’ll see two options:

• Embeddable Component
  → Use as a block inside any page

• Full Page Widget
  → Use as a standalone page

For most widgets (like countdown timers), select Embeddable Component.

---

3. Describe What You Want

Use natural language to tell Dave what to build.

**Example: create a countdown timer to march 15 2026 at 2pm est. make it teal and white

---

4. Make Changes (if needed)

If you need to update your fragment, simply describe changes to Dave.

**Example: make the text black

---

5. Add Your Fragment to a Page

1. Open the page editor
2. Drag in the Fragment (Embeddable Component) block
3. Select your fragment from the dropdown
4. Save changes

---

Advanced: Custom-Coded Fragments

Brands can also use their own code to create fragments for more advanced use cases.

---

Access to App Data

Depending on the fragment type, your code can access injected app data, including:

• Product object
• Collection object
• Cart object
• Customer object

This data is automatically injected into the fragment and can be used directly in your logic and UI.

---

Use Existing Blocks

All standard app blocks are available as objects inside fragments.

For example:

• Use a carousel block within a fragment
• Combine multiple block types into a custom experience

---

Trigger App Events

Fragments can trigger native app events such as:

• Add to cart
• Navigate to a page
• Clear cart

This allows fragments to behave like fully interactive app components.

---

API Requests

Fragments can make requests to external APIs.

Supported:

• REST APIs
• GraphQL APIs

---

Secure API Requests

• APIs can be signed with HMAC configured in the admin
• This ensures the receiving API can verify requests are coming from your mobile app

---

Authentication & Secrets

If an API requires authentication:

• Tokens can be stored securely in Secrets (Env Vault)
• Tokens are passed to the mobile app only after authorization
• Works similarly to TNL API handshake mechanisms

---

Using API Data

Developers can:

• Fetch external data
• Combine it with app data (product, cart, customer, etc.)
• Render dynamic UI based on API responses

---

Best Practices

• Use AI (Dave) for rapid prototyping.
• Use custom code for advanced or dynamic use cases.
• Leverage injected app data instead of duplicating logic.
• Secure all API requests with HMAC when possible.
• Store sensitive credentials in Secrets (Env Vault).
• Test fragments thoroughly before publishing.

---

Fragments give you the flexibility to combine AI, app data, and custom code to create powerful, dynamic experiences inside your app.