# Configure Simple Message Template Components

To effectively manage your message templates, you may find it necessary to delete certain templates that are no longer relevant.

### Header

In a Simple Message Template, you can have following types of header:

* **Text Header:** Add a text-based header to your message.
* **Image Header:** Include an image to visually enhance your header.
* **Video Header:** Embed a video to make your message more engaging.
* **Document Header:** Attach a document for detailed information.
* **Location Header:** Share a specific location with your clients.

If you prefer not to use a header, you can simply select **None** to omit this component.

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

<Tabs defaultValue="text">
  <TabsList>
    <TabsTrigger value="text">Text</TabsTrigger>
    <TabsTrigger value="image">Image</TabsTrigger>
    <TabsTrigger value="video">Video</TabsTrigger>
    <TabsTrigger value="document">Document</TabsTrigger>
    <TabsTrigger value="location">Location</TabsTrigger>
  </TabsList>

  <TabsContent value="text">
    <ol>
      <li>
        <strong>Choose Type of Header:</strong><br />
        In the components editor, select <strong>Text</strong> as the type of header below the <strong>Header</strong> heading.
      </li>
      <li>
        <strong>Enter Header Text:</strong><br />
        Input your desired header text in the field below the header type field. The header text can be up to <strong>60 characters</strong> long. 
        You can include one variable, which allows for personalization. If you add a variable, be sure to provide a sample value for review.
      </li>
    </ol>
    <p>
      For example, you might use <code>Hello \{\{1\}\}</code>. When sending, replace <code>\{\{1\}\}</code> with the client’s name for a familiar touch.
    </p>
    <p><strong>Note:</strong> Markdown formatting is not supported in the header text.</p>
  </TabsContent>

  <TabsContent value="image">
    <ol>
      <li>
        <strong>Choose Type of Header:</strong><br />
        In the components editor, select <strong>Media</strong> as the type of header below the <strong>Header</strong> heading.
      </li>
      <li>
        <strong>Choose Media Type:</strong><br />
        Click on the <strong>image</strong> icon below the header type field.
      </li>
      <li>
        <strong>Upload Sample Media:</strong><br />
        In the card that appears, upload a sample image for review purposes only.<br />
        Supported image types are: <strong>PNG, JPEG, JPG</strong>.
      </li>
    </ol>
  </TabsContent>

  <TabsContent value="video">
    <ol>
      <li>
        <strong>Choose Type of Header:</strong><br />
        In the components editor, select <strong>Media</strong> as the type of header below the <strong>Header</strong> heading.
      </li>
      <li>
        <strong>Choose Media Type:</strong><br />
        Click on the <strong>video</strong> icon below the header type field.
      </li>
      <li>
        <strong>Upload Sample Media:</strong><br />
        In the card that appears, upload a sample video for review purposes only.<br />
        Only <strong>MP4</strong> video is supported.
      </li>
    </ol>
  </TabsContent>

  <TabsContent value="document">
    <ol>
      <li>
        <strong>Choose Type of Header:</strong><br />
        In the components editor, select <strong>Media</strong> as the type of header below the <strong>Header</strong> heading.
      </li>
      <li>
        <strong>Choose Media Type:</strong><br />
        Click on the <strong>document</strong> icon below the header type field.
      </li>
      <li>
        <strong>Upload Sample Media:</strong><br />
        In the card that appears, upload a sample PDF for review purposes only.<br />
        Only <strong>PDF</strong> is supported in document headers.
      </li>
    </ol>
  </TabsContent>

  <TabsContent value="location">
    <ol>
      <li>
        <strong>Choose Type of Header:</strong><br />
        In the components editor, select <strong>Location</strong> as the type of header below the <strong>Header</strong> heading.
      </li>
      <li>
        <strong>Specify Location:</strong><br />
        Note that you can choose the location when sending or broadcasting the message. 
        The location cannot be predefined before this stage.
      </li>
    </ol>
  </TabsContent>
</Tabs>

### 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.

### Footer

The footer of the message is optional and can be up to **60 characters** long. Please note that it does not support **Markdown formatting** or **variables**. Use this space for additional information or a closing statement, such as "Thank you for your business!".

### Buttons

Buttons are optional but can enhance user interaction. You can add up to **10 buttons** in total, with the following limitations:

* **Up to 2 URL buttons**
* **1 Call button**
* **1 Copy offer code button**
* **Reply buttons**

To add a button, click on the "**Add a button**" option below the "**Buttons**" heading and choose the type of button you'd like to include.

<Tabs defaultValue="url">
  <TabsList>
    <TabsTrigger value="url">URL Button</TabsTrigger>
    <TabsTrigger value="call">Call Button</TabsTrigger>
    <TabsTrigger value="offer">Copy Offer Code 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="offer">
    <ul>
      <li>Enter a <strong>sample offer code</strong> for review purposes only. Please do not use real or sensitive information.</li>
    </ul>
  </TabsContent>

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