This template creates a customizable slideout modal that appears from the left or right side of the page. It features dynamic content, styling options, dual buttons, and comprehensive tracking capabilities.
✨ Simplified Design: This template has been streamlined with a single background color option for ease of use, removing complex split-color functionality that wasn't specified in the original requirements.
- ✅ Page visit triggering with timing control
- ✅ Slide animations from left or right side with position control
- ✅ Background color control: customizable background color
- ✅ Dynamic text layout with 3 format options
- ✅ Complete typography control for all text elements
- ✅ Two customizable buttons with full styling and dimension control
- ✅ Image support with optional display
- ✅ Smart close button positioned in corner
- ✅ Event tracking for all user interactions
- ✅ Cookie-based display prevention
- ✅ Mobile responsive design
- What it does: Sets how many page views are required before the slideout appears
- Default:
1(shows on first page visit) - Examples:
1= Show immediately on first visit3= Show after user has visited 3 pages0= Show on every page load (not recommended)
- What it does: Delay in seconds before the slideout appears
- Default:
0(immediate) - Examples:
0= Show immediately3= Wait 3 seconds after page load10= Wait 10 seconds (good for engagement timing)
- What it does: Controls which side the slideout slides in from
- Options:
Slide from Left= Appears from left edge of screenSlide from Right= Appears from right edge of screen
- What it does: Controls vertical position on the page
- Options:
Top of Page= Appears near top of viewportCenter of Page= Appears vertically centeredBottom of Page= Appears near bottom of viewport
- What it does: Sets the color of the slideout's outer border
- Default:
#000000(black) - Format: Hex color code (e.g.,
#FF0000for red)
- What it does: Displays an image at the top of the slideout
- Default: DirectTV services image for testing
- Usage:
- Leave blank to hide image section
- Use full URL (https://...)
- Images are automatically responsive
- What it does: Sets the background color for the entire slideout modal
- Default:
#F4F4F4(light gray) - Format: Hex color code (e.g.,
#FFFFFFfor white,#000000for black) - Usage: This color fills the entire modal background area
- What it does: Controls the order and presence of headline/subheadline
- Options:
Headline Only= Shows only main headlineHeadline + Subheadline= Headline first, then subheadlineSubheadline + Headline= Subheadline first, then headline
- Text: The smaller header text
- Font Family: Font name (e.g., "Arial, sans-serif")
- Color: Hex color code for text
- Font Size: Size with units (e.g., "16px")
- Alignment: left, center, or right
- Text: The main header text
- Font Family: Font name (e.g., "Arial, sans-serif")
- Color: Hex color code for text
- Font Size: Size with units (e.g., "24px")
- Alignment: left, center, or right
- Text: Main descriptive content (supports HTML)
- Font Family: Font name (e.g., "Arial, sans-serif")
- Color: Hex color code for text
- Font Size: Size with units (e.g., "14px")
- Alignment: left, center, or right
- Text: Small print, disclaimers (supports HTML)
- Font Family: Font name (e.g., "Arial, sans-serif")
- Color: Hex color code for text
- Font Size: Size with units (e.g., "10px")
- Alignment: left, center, or right
- Text: Button label (e.g., "Claim Offer")
- Link URL: Where button clicks go (e.g., "/pages/landing")
- Font Family: Button text font
- Text Color: Button text color
- Font Size: Button text size
- Background Color: Button background color
- Text: Button label (e.g., "No Thanks")
- Font Family: Button text font
- Text Color: Button text color
- Font Size: Button text size
- Background Color: Button background color
- Border Color: Button border color
Note: Secondary button automatically closes the slideout when clicked
- Alignment: Position of button container (left, center, right)
- Width: Button width (e.g., "120px")
- Height: Button height (e.g., "40px")
- Border Radius: Roundness of corners (e.g., "25px" for pills)
- Gap Between Buttons: Space between the two buttons (e.g., "12px")
Width: 120px
Height: 36px
Border Radius: 25px
Gap: 15px
Width: 100px
Height: 40px
Border Radius: 4px
Gap: 10px
Background Color: #1E3A8A (dark blue)
- Width: 400px
- Full feature set
- Smooth animations
- Width: 320px
- Adjusted padding
- Smaller fonts
- Optimized touch targets
Automatically tracks these events to Optimizely:
slideout_closed- When X button is clickedslideout_primary_button_clicked- When main button is clickedslideout_secondary_button_clicked- When secondary button is clicked
- Sets
slideoutShown=truecookie when closed - Prevents slideout from showing again for 24 hours
- Respects user dismissal choice
- Lightweight CSS animations
- No external dependencies
- Efficient DOM manipulation
- Mobile-optimized
Problem: Image field has URL but image doesn't display Solutions:
- Check URL is accessible (try opening in browser)
- Ensure URL starts with
https:// - Verify image isn't blocked by CORS policy
Possible causes:
- Cookie already set from previous test
- Page visits requirement not met
- Timing delay still counting down
- Check browser console for JavaScript errors
Problem: Buttons don't match design Solution: Adjust these fields:
- Button Width (e.g., "100px")
- Button Height (e.g., "36px")
- Button Border Radius (e.g., "25px")
Problem: Text elements overlap or look cramped Solutions:
- Reduce font sizes
- Adjust button height
- Shorten text content
- Keep headline under 50 characters
- Use compelling action words for buttons
- Make legal text concise but complete
- Test with actual content, not Lorem Ipsum
- Use high contrast colors for accessibility
- Keep button text readable at all sizes
- Test on both light and dark backgrounds
- Ensure image enhances, doesn't distract
- 3-5 seconds delay often works well
- Don't interrupt critical user flows
- Consider page content when timing
- Test with real user behavior
- Test on actual devices, not just browser resize
- Ensure buttons are easily tappable (min 44px)
- Keep text readable without zooming
- Consider thumb-friendly button placement
- Slideout appears from correct side
- Timing delay works as expected
- Image loads and displays properly
- Background color shows correctly
- All text is readable and properly styled
- Both buttons work and are properly sized
- Close button works and is positioned correctly
- Slideout closes and doesn't reappear
- Mobile responsive design works
- Event tracking fires correctly
- 🎯 Trigger: Page visits, timing
- 📍 Position: Direction, placement
- 🖼️ Visual: Border, image
- 🎨 Background: Color
- 📝 Text: Format, content, styling
- 🔘 Buttons: Content, styling, layout
- Total Fields: 37 configurable options
- Field Groups: 6 logical sections with emoji organization
- Complexity: Simplified single background color (no split functionality)
- Container: 400px wide (320px mobile)
- Close button: 22px circle, 5px from corner edges
- Padding: 15px internal spacing
- Animation: 0.5s ease-out transition
This template provides a complete slideout modal solution with extensive customization options. For additional support or feature requests, refer to the Optimizely documentation or contact your development team.