SendBun Embed - Integration Guide

Quick Start

Step 1: Load the Web Component

Include the SendBun embed script in your HTML:

<!-- Step 1: Load the web component -->
<script src="https://embed.sendbun.com/sendbun-embed.js"></script>

Step 2: Add the Component to Your Page

Use the <sendbun-mail> element anywhere in your HTML:

<!-- Step 2: Add the component to your page -->
<sendbun-mail design="quickrelay"></sendbun-mail>

Step 3: Customize with Attributes (Optional)

Add attributes to customize size, design, and background color:

<!-- Optional: Customize with attributes -->
<sendbun-mail
  design="zerohub"
  height="600px"
  width="100%"
  bg-color="#c0000"
></sendbun-mail>

Available Designs

✨

QuickRelay

Premium look with refined aesthetics and smooth interactions.

design="quickrelay"

🏛️

ZeroHub

Timeless interface that works across all user demographics.

design="zerohub"

🌙

MailDock

Modern dark mode with stunning visual effects.

design="maildock"

🚀

InboxGate

Contemporary interface with dynamic animations.

design="inboxgate"

Configuration Options

Attribute	Type	Default	Description
`design`	string	quickrelay	Which design to display: quickrelay, zerohub, maildock, inboxgate
`height`	string	100vh	Height of the embed container (e.g., "600px", "100%")
`width`	string	100%	Width of the embed container (e.g., "400px", "100%")
`bg-color`	string	transparent	Background color of the embed (e.g., "#c0000", "white", "rgb(192, 0, 0)")

Usage Examples

Full Screen

Display the embed at full screen size:

<sendbun-mail design="quickrelay"></sendbun-mail>

Fixed Size with Color

Embed with specific dimensions and background color:

<sendbun-mail design="zerohub" height="600px" width="400px" bg-color="#c0000"></sendbun-mail>

Custom Design

Use different design styles with custom background:

<sendbun-mail design="maildock" height="500px" bg-color="#ffffff"></sendbun-mail>

Responsive

Make embed responsive with CSS and custom background:

<div style="width: 100%; max-width: 500px;">
<sendbun-mail design="inboxgate" bg-color="#f0f0f0"></sendbun-mail>
</div>

Available Designs

✨

QuickRelay

Premium look with refined aesthetics and smooth interactions.

design="quickrelay"

🏛️

ZeroHub

Timeless interface that works across all user demographics.

design="zerohub"

🌙

MailDock

Modern dark mode with stunning visual effects.

design="maildock"

🚀

InboxGate

Contemporary interface with dynamic animations.

design="inboxgate"

Frequently Asked Questions

Is it secure?

Yes! The embed uses an iframe with the sandbox attribute, providing security isolation. Your users' data is protected.

Can I customize the design?

Yes! We offer 4 unique designs to choose from (quickrelay, zerohub, maildock, inboxgate). Each can be resized as needed.

Does it work offline?

No, the embed requires internet access to load the interface and connect to the API.

What browsers are supported?

All modern browsers that support Web Components and iframes (Chrome, Firefox, Safari, Edge).

Can I copy email addresses?

Yes! Click the copy icon next to any email address to copy it to your clipboard.

What are the supported attributes?

Supported attributes: design, height, and width. Use these to customize the embed appearance and size.