Styling
Customizing TapKit UI styles
Styling
TapKit uses the style attribute to directly specify size and position.
Basic Usage
Use the style attribute to specify size.
const kit = document.querySelector('tap-kit');
kit.style.width = '400px';
kit.style.height = '600px';Or specify directly in HTML:
<tap-kit
style="width: 400px; height: 100%;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>Display Modes
TapKit supports 3 display modes.
| Mode | Description | Positioning |
|---|---|---|
inline | Embed in page content (default) | Declared location |
floating | Compact widget | position: fixed |
sidebar | Full-height sidebar | position: fixed |
<tap-kit mode="inline" ...></tap-kit>
<tap-kit mode="floating" ...></tap-kit>
<tap-kit mode="sidebar" ...></tap-kit>Inline Mode (Default)
Inline mode embeds naturally into page content.
<tap-kit
style="width: 100%; height: 600px;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>Sidebar Layout Example
<style>
.app-layout {
display: grid;
grid-template-columns: 1fr 400px;
height: 100vh;
}
</style>
<div class="app-layout">
<main><!-- Course content --></main>
<tap-kit
style="width: 100%; height: 100%;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>
</div>Floating Mode
Floating mode is fixed on screen with position: fixed.
<tap-kit
mode="floating"
style="width: 380px; height: 600px;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>In Floating/Sidebar modes, the SDK automatically manages positioning.
Adjust only the size via style attribute if needed.
Sidebar Mode
Sidebar mode displays at full height on the right side of the screen.
<tap-kit
mode="sidebar"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>Users can drag to adjust width.
Layout Toggle
By default, users can switch between Floating ↔ Sidebar modes. To disable this:
<tap-kit mode="floating" allow-layout-toggle="false" ...></tap-kit>kit.allowLayoutToggle = false;Responsive Design
Use media queries for responsive sizing.
<style>
tap-kit {
width: 100%;
height: 500px;
}
@media (min-width: 768px) {
tap-kit {
width: 500px;
height: 700px;
}
}
</style>
<tap-kit user-id="..." course-id="..." clip-id="..."></tap-kit>CSS Variables
TapKit provides CSS Variables for customizing layout. Use these to override default values.
Floating Mode Variables
| Variable | Default | Description |
|---|---|---|
--tap-floating-width | 430px | Container width |
--tap-floating-height | calc(100% - 116px) | Container height |
--tap-floating-top | 50px | Top position |
--tap-floating-right | 20px | Right position |
--tap-floating-bottom | auto | Bottom position |
--tap-floating-left | auto | Left position |
--tap-floating-border-radius | 10px | Border radius |
--tap-floating-shadow | (complex) | Box shadow |
Sidebar Mode Variables
| Variable | Default | Description |
|---|---|---|
--tap-sidebar-width | min(50%, 600px) | Max width |
--tap-sidebar-border | 1px solid #B8B9B9 | Left border |
Inline Mode Variables
| Variable | Default | Description |
|---|---|---|
--tap-kit-width | 100% | Container width |
--tap-kit-height | 100% | Container height |
--tap-kit-min-width | 300px | Minimum width |
--tap-kit-min-height | 600px | Minimum height |
Usage Examples
/* Adjust floating width */
tap-kit {
--tap-floating-width: 380px;
}
/* Responsive floating */
@media (max-width: 768px) {
tap-kit {
--tap-floating-width: 100%;
--tap-floating-right: 0;
--tap-floating-border-radius: 0;
}
}
/* Wider sidebar */
tap-kit {
--tap-sidebar-width: min(60%, 800px);
}CSS Variables provide the cleanest way to customize TapKit's appearance. They work with all display modes and are the recommended approach over inline styles.
Mode Comparison
| Feature | Inline Mode | Floating/Sidebar Mode |
|---|---|---|
| Positioning | Inside page content | Floating on screen (fixed) |
| Position control | Depends on parent | SDK auto-managed |
| Layout impact | Yes | No |
| Use case | Sidebar, content section | Chat widget |
| Default | ✅ v2.0+ |
tap-button Styling
The <tap-button> element can be customized through CSS Shadow Parts.
Basic Attributes
<!-- Adjust position and size -->
<tap-button
position="bottom-right"
size="large"
></tap-button>| Attribute | Values | Description |
|---|---|---|
position | bottom-right, bottom-left, top-right, top-left, custom | Button position |
size | small (48px), medium (56px), large (64px) | Button size |
floating | true, false | Fixed/floating mode |
CSS Shadow Parts
Modify button styles with external CSS.
/* Customize button styles */
tap-button::part(button) {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 50%;
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}
tap-button::part(button):hover {
transform: scale(1.1);
}
/* Customize tooltip styles */
tap-button::part(tooltip) {
background: #1f2937;
color: white;
border-radius: 12px;
}Custom Icon
Use slots to replace the default icon.
<tap-button position="bottom-right">
<img src="/my-tutor-icon.svg" alt="AI Tutor" />
</tap-button>Static Mode (Non-floating)
Use floating="false" to place in normal document flow.
<div class="button-container">
<tap-button floating="false" size="medium"></tap-button>
</div>In floating="false" mode, the button renders with position: static, placed like a normal element within its parent.