> For the complete documentation index, see [llms.txt](https://docs.subscripta.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.subscripta.app/builder/custom-theme-builder.md).

# Use the custom theme builder

The custom theme builder is for teams that need a fully bespoke email signature template instead of only adjusting an existing gallery template.

It supports two authoring modes:

* **Visual blocks**: build a reusable custom layout from configurable blocks.
* **HTML**: write email-safe HTML/CSS directly and use placeholders such as `{{name}}`, `{{email}}`, and `{{logo_src}}`.

## Availability

The Custom HTML editor is available on paid plans. It is especially useful for Business workspaces that need reusable templates for many employees, departments, or clients.

## HTML Mode

In HTML mode, Subscripta renders your template by replacing placeholder tokens with the signature data.

Example:

```html
<table cellpadding="0" cellspacing="0" border="0" style="font-family:{{font}};">
  <tr>
    <td style="padding-right:12px;">
      <img src="{{avatar_src}}" width="64" height="64" alt="{{name}}" style="border-radius:50%;">
    </td>
    <td>
      <p style="margin:0;color:{{color.primary}};font-size:16px;font-weight:bold;">{{name}}</p>
      <p style="margin:2px 0 8px;color:#555;">{{title}} - {{company}}</p>
      <a href="{{mailto}}" style="color:{{color.accent}};">{{email}}</a>
    </td>
  </tr>
</table>
```

Use table-based layouts and inline styles for the best email-client compatibility. Do not use JavaScript.

## AI-Ready Prompt

The custom builder includes a **Copy AI Prompt** action. It copies a prompt that tells an AI tool to create email-safe HTML using Subscripta placeholders exactly as written.

The generated prompt includes these rules:

* Write valid HTML/CSS only.
* Do not use JavaScript.
* Keep styles inline for email-client compatibility.
* Use table-based layout.
* Use `_src` placeholders for image `src` values.
* Use `{{color.primary}}` and `{{color.accent}}` for brand colors.
* Use `{{font}}` for the font stack.

After generating HTML, paste it into HTML mode and review the live preview before saving.

## Placeholder Reference

### Identity

| Placeholder      | Description  | Example           |
| ---------------- | ------------ | ----------------- |
| `{{name}}`       | Full name    | `Jane Smith`      |
| `{{title}}`      | Job title    | `Senior Designer` |
| `{{company}}`    | Company name | `Acme Corp`       |
| `{{department}}` | Department   | `Marketing`       |

### Contact

| Placeholder       | Description              | Example                |
| ----------------- | ------------------------ | ---------------------- |
| `{{email}}`       | Email address            | `jane@acme.com`        |
| `{{phone}}`       | Phone number             | `+1 555 0100`          |
| `{{website}}`     | Website without protocol | `acme.com`             |
| `{{website_url}}` | Full website URL         | `https://acme.com`     |
| `{{mailto}}`      | Email link href value    | `mailto:jane@acme.com` |
| `{{tel}}`         | Phone link href value    | `tel:+15550100`        |

### Images

| Placeholder      | Description       | Example   |
| ---------------- | ----------------- | --------- |
| `{{avatar_src}}` | Profile photo URL | Image URL |
| `{{logo_src}}`   | Company logo URL  | Image URL |
| `{{qr_src}}`     | QR code URL       | Image URL |
| `{{banner_src}}` | Banner image URL  | Image URL |

### Design

| Placeholder         | Description         | Example             |
| ------------------- | ------------------- | ------------------- |
| `{{color.primary}}` | Primary brand color | `#3b82f6`           |
| `{{color.accent}}`  | Accent color        | `#1d4ed8`           |
| `{{font}}`          | Font family CSS     | `Arial, sans-serif` |

### Social

| Placeholder            | Description     | Example                        |
| ---------------------- | --------------- | ------------------------------ |
| `{{social.linkedin}}`  | LinkedIn URL    | `https://linkedin.com/in/...`  |
| `{{social.twitter}}`   | X / Twitter URL | `https://x.com/...`            |
| `{{social.instagram}}` | Instagram URL   | `https://instagram.com/...`    |
| `{{social.facebook}}`  | Facebook URL    | `https://facebook.com/...`     |
| `{{social.youtube}}`   | YouTube URL     | `https://youtube.com/...`      |
| `{{social.tiktok}}`    | TikTok URL      | `https://tiktok.com/@...`      |
| `{{social.github}}`    | GitHub URL      | `https://github.com/...`       |
| `{{social.whatsapp}}`  | WhatsApp URL    | `https://wa.me/...`            |
| `{{social.pinterest}}` | Pinterest URL   | `https://pinterest.com/...`    |
| `{{social.spotify}}`   | Spotify URL     | `https://open.spotify.com/...` |
| `{{social.wechat}}`    | WeChat URL      | `https://weixin.qq.com/r/...`  |

`{{social.x}}` is also accepted as an alias for X / Twitter.

## Before Saving

Check the live preview, then send test emails in the clients your team uses most. Email clients can rewrite HTML differently, so keep the template simple, table-based, and inline-styled.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.subscripta.app/builder/custom-theme-builder.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
