Slide-in Templates

Slide-in templates appear from the corners of the screen, providing a less intrusive way to engage visitors. They're perfect for subtle promotions and secondary CTAs.

Overview

Property	Value
Template Count	38+
Position	Screen corners
Overlay	Optional (usually none)
Best For	Subtle engagement, chat, offers

Common Use Cases

Promotions

• Discount offers
• Limited-time deals
• Product recommendations
• Upsells

Engagement

• Newsletter signup
• Social proof notifications
• Live chat widgets
• Feedback requests

Notifications

• Success messages
• Achievement badges
• Update alerts
• Reminders

Support

• Chat initiation
• Help suggestions
• FAQ prompts
• Contact options

Position Options

Bottom Right

[Page Content]
            ┌─────┐
            │Slide│
            └─────┘

Most common. Doesn't interfere with reading flow.

Bottom Left

[Page Content]
┌─────┐
│Slide│
└─────┘

Good for RTL languages or unique positioning.

Top Right

            ┌─────┐
            │Slide│
            └─────┘
[Page Content]

Higher visibility, may conflict with navigation.

Top Left

┌─────┐
│Slide│
└─────┘
[Page Content]

Less common, good for specific layouts.

Template Styles

Compact

Small, notification-style:

• Minimal content
• Single action
• Quick dismiss
• Small footprint

Standard

Balanced size:

• Heading + text
• CTA button
• Image optional
• Clear close

Rich

Feature-rich designs:

• Images/graphics
• Multiple elements
• Form fields
• Multiple actions

Chat-Style

Messenger-like appearance:

• Chat bubble shape
• Avatar/icon
• Conversational tone
• Expand option

Layout Patterns

Simple CTA

┌─────────────────┐
│ [X]             │
│ Headline        │
│ Brief text      │
│ [Button]        │
└─────────────────┘

With Image

┌─────────────────┐
│ [Image]    [X]  │
│ Headline        │
│ Text            │
│ [CTA]           │
└─────────────────┘

Notification Style

┌─────────────────┐
│ [Icon] Message  │
│ [Action] [X]    │
└─────────────────┘

Newsletter

┌─────────────────┐
│ [X]             │
│ Stay Updated    │
│ [email@...]     │
│ [Subscribe]     │
└─────────────────┘

Size Guidelines

Type	Dimensions
Compact	250-300px wide
Standard	300-350px wide
Large	350-400px wide

Height: Auto-fit content (typically 150-300px)

Animation Options

Entry Animations

• Slide from corner
• Slide + fade
• Scale up
• Bounce

Direction

Based on position:

• Bottom-right: Slides from right/bottom
• Top-left: Slides from left/top

Timing

• Delay: 2-5 seconds typical
• Duration: 300-500ms
• Easing: ease-out

Behavior Settings

Trigger Timing

Trigger	Best For
Time delay	General engagement
Scroll depth	Content engagement
Exit intent	Last chance offers
Click	User-initiated

Persistence

• Show once per session
• Show once per day
• Show on every page
• Show based on rules

Dismiss Behavior

• Close button
• Click outside
• Auto-dismiss after time
• Swipe away (mobile)

Customization Tips

Positioning

• Account for other elements (chat, scroll-to-top)
• Offset from edges (16-24px)
• Avoid covering content

Styling

• Match site design
• Clear border/shadow
• Adequate contrast
• Readable text size

Content

• Concise messaging
• Single clear CTA
• Value proposition
• Urgency optional

Best Practices

1. Don't stack — One slide-in at a time
2. Easy dismiss — Clear close button
3. Appropriate timing — Don't appear immediately
4. Mobile-friendly — Test on small screens
5. Non-blocking — Content remains accessible
6. Clear value — Worth the interruption

Social Proof Slide-ins

Show recent activity:

┌─────────────────┐
│ [Avatar]        │
│ John from NYC   │
│ just purchased  │
│ Product Name    │
│ 2 minutes ago   │
└─────────────────┘

Chat Widget Style

Mimic chat interfaces:

┌─────────────────┐
│ 💬 Need help?   │
│ We're online!   │
│ [Start Chat]    │
└─────────────────┘

Discount Offers

Limited-time deals:

┌─────────────────┐
│ 🎁 Special Offer│
│ 20% OFF Today   │
│ Use code: SAVE20│
│ [Shop Now]      │
└─────────────────┘

Mobile Considerations

• May need full-width on small screens
• Bottom position often better
• Larger touch targets
• Consider hiding on mobile
• Avoid covering navigation

Comparison: Slide-in vs Popup

Aspect	Slide-in	Popup
Intrusiveness	Low	Medium-High
Attention	Moderate	High
Content space	Limited	More space
Overlay	Usually none	Yes
Best for	Secondary CTAs	Primary conversions