# Configure Carousel-Media Message Template Components

### Body

The body of the message is required and can be up to **1024 characters** long. It supports **Markdown formatting**, allowing you to enhance your text with styles like bold, italics, and line through text. You can also include **multiple variables** for personalization; just be sure to provide sample values for these variables for review.

For example, you might write: "Hello \{\{1\}\}, your order \{\{2\}\} has been shipped!" When sending, replace \{\{1\}\} with the client's name and \{\{2\}\} with the order number.

### Card Configuration

In the **Carousel Message Template**, before adding cards, you must configure them.

You can choose between two types of headers: **image** or **video**. Each carousel card requires at least **one button**, with a maximum of **two buttons** allowed. The following button types are supported in carousel cards: **reply**, **call**, and **URL**.

You can find the configuration options below the **"Card Configuration"** heading. To add an image header, click the **image icon** below the **"Header"** text in the **"Card Configuration"** section. For a video header, click the **video icon** instead.

To add buttons, click on the respective icons for the button types: the **reply button icon**, **call button icon**, or **URL button icon**. Ensure to configure each button according to its type as required.

### Cards

**Add a New Card:**

* To add a new card, scroll down to the **Cards** section.
* Scroll to the right and click the **"Add New Card"** button. This will create a new card that you can customize individually.

**Configure Card Content:**

1. **Scroll to Cards Section:**
   * Scroll down to the **Cards** section to start adding or modifying cards.
2. **Upload Media:**
   * For each card, you can upload a sample **image** or **video** for review.
   * Supported image formats: **PNG, JPEG, JPG**.
   * Supported video format: **MP4**.
3. **Enter Body Text:**
   * For each card, input the body text. This text can be up to **160 characters** long and may include variables. If you add variables, please also provide sample values for review.
4. **Configure Buttons:**
   * The button types selected during configuration will be set up below the card content for each card. Customize them according to your needs.

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "zudoku/ui/Tabs";

<Tabs defaultValue="url">
  <TabsList>
    <TabsTrigger value="url">URL Button</TabsTrigger>
    <TabsTrigger value="call">Call Button</TabsTrigger>
    <TabsTrigger value="reply">Reply Button</TabsTrigger>
  </TabsList>

  <TabsContent value="url">
    <ul>
      <li>Enter the <strong>Button Text</strong> (up to 25 characters) in the field provided.</li>
      <li>Below the Button Text field, enter the <strong>Website URL</strong>. You can include up to 1 variable at the end of the URL for personalization.</li>
      <li>If you use a variable, ensure you provide the full sample URL for review.</li>
    </ul>
  </TabsContent>

  <TabsContent value="call">
    <ul>
      <li>Enter the <strong>Button Text</strong> (up to 25 characters) in the field provided.</li>
      <li>Below the Button Text field, enter the <strong>Phone Number</strong> that will be dialed when the call button is clicked.</li>
    </ul>
  </TabsContent>

  <TabsContent value="reply">
    <ul>
      <li>Enter the <strong>button text</strong> (up to 25 characters).</li>
    </ul>
  </TabsContent>
</Tabs>