How to Use Linkilo Link Preview Feature

Go Back to Main Knowledgebase

What is Link Preview?

Link Preview is a powerful feature in Linkilo that creates interactive tooltip previews when users hover over links on your website. Instead of visitors having to click a link to see where it goes, they get an instant preview showing the destination page’s title, description, image, and other helpful information.

Think of it like the preview cards you see on social media platforms when someone shares a link – but these appear on hover directly on your website!

Key Benefits

• Improved User Experience: Visitors can preview content before clicking
• Reduced Bounce Rate: Users get more context about where links lead
• Professional Appearance: Modern, polished look for your website
• Mobile Optimized: Responsive design that works on all devices
• Highly Customizable: Match your site’s design perfectly

How to Enable Link Preview

Step 1: Navigate to Link Preview Settings

1. Go to your WordPress admin dashboard
2. Click on Linkilo in the left menu
3. Click on Settings
4. Select the Link Preview Settings tab

Step 2: Enable the Feature

1. Check the box for “Enable Link Preview”
2. Choose your link types:
   • Enable preview for internal links: Shows previews for links within your site
   • Enable preview for external links: Shows previews for external websites

Step 3: Configure Domain Exclusions (Optional)

In the Domain exclusion list textarea, you can add domains (one per line) that you don’t want to show previews for:

example.com
anotherdomain.org

Customization Options

General & Behavior Settings

Preview Position

Choose where the preview appears relative to the link:

• Top: Above the link
• Bottom: Below the link (default)
• Left: To the left of the link
• Right: To the right of the link

Position Offset: Distance in pixels from the link (default: 10px)

Animation Effects

Select how the preview appears:

• None: Instant appearance
• Fade In: Smooth fade animation
• Slide In: Slides down from top
• Zoom In: Scales up from center
• Bounce: Bouncy entrance effect
• Pulse: Subtle pulsing effect

Animation Speed: How fast the animation plays (50-1000ms)

Interaction Settings

• Hover Delay: Time before preview shows (0-2000ms)
• Show Close Button: Adds an X button to manually close previews
• Click Preview to Open Link: Makes the entire preview clickable

Content Display Options

Image Settings

• Show Featured Image: Display the page’s featured image
• Max Height: Maximum image height (50-300px)
• Position: Top, Left, or Right of content
• Border Radius: Rounded corners for images (0-30px)
• Hide if no image found: Don’t show empty image area
• Image Placeholder Background: Color when image is missing

Title Settings

• Show Title: Display the page title
• Font Size: Title text size (10-30px)
• Color: Title text color
• Font Weight: Normal, Bold, Semi-Bold, or Lighter
• Max Length: Character limit (0 = no limit)
• Text Align: Left, Center, or Right
• Text Transform: None, UPPERCASE, lowercase, or Capitalize

Description Settings

• Show Description: Display page description/excerpt
• Font Size: Description text size (10-24px)
• Color: Description text color
• Font Weight: Text weight options
• Line Height: Spacing between lines (1.0-2.5)
• Max Length: Character limit (0 = no limit)
• Text Align: Left, Center, or Right

Site Info (Domain & Favicon)

• Show Domain Name: Display the website’s domain
• Font Size: Domain text size (8-20px)
• Color: Domain text color
• Font Style: Normal or Italic
• Font Weight: Text weight options
• Show Favicon: Display the site’s favicon icon
• Favicon Size: Icon size (12-32px)

Call-to-Action Button

• Show CTA Button: Add a clickable button
• Text: Button text (default: “Visit Site”)
• Background Color: Button background
• Text Color: Button text color
• Font Size: Button text size
• Font Weight: Button text weight
• Padding: Button spacing (top/bottom and left/right)
• Border Radius: Button corner rounding

Appearance & Styling

Container Styling

• Background Color: Preview background color
• Max Width: Maximum preview width (150-600px)
• Padding: Internal spacing (0-30px)
• Font Family: Overall font choice (inherit from theme or specific fonts)

Border Styling

• Width: Border thickness (0-10px)
• Color: Border color
• Radius: Corner rounding (0-30px)
• Style: None, Solid, Dashed, Dotted, or Double

Shadow Styling

• Show Shadow Effect: Enable drop shadow
• Color: Shadow color (supports rgba for transparency)
• Offset X: Horizontal shadow position (-20 to 20px)
• Offset Y: Vertical shadow position (-20 to 20px)
• Blur Radius: Shadow softness (0-30px)
• Spread Radius: Shadow size (-10 to 20px)

Mobile Optimization

Mobile Behavior

• Apply Mobile Optimizations: Enable mobile-specific settings
• Completely Disable Preview on Mobile: Turn off previews on mobile devices

Mobile Styling

• Max Width on Mobile: Smaller width for mobile (100-400px)
• Mobile Title Font Size: Smaller title text for mobile
• Mobile Description Font Size: Smaller description text for mobile

Advanced Options

Preset Themes

Quick styling options:

• Custom: Use your manual settings
• Minimal: Clean, simple design
• Elegant: Sophisticated styling
• Modern: Contemporary appearance
• Dark Mode: Dark background theme
• Colorful: Vibrant color scheme
• High Contrast: Accessibility-focused design

Custom CSS

Add your own CSS code to further customize the appearance:

.link-preview-tooltip {
    /* Your custom styles here */
}

How It Works Technically

Frontend Behavior

1. Link Detection: JavaScript scans your pages for links with href attributes
2. Smart Filtering: Excludes navigation, header, footer, and menu links automatically
3. AJAX Requests: Fetches preview data when users hover over eligible links
4. Caching: Stores preview data locally to improve performance
5. Responsive Positioning: Automatically adjusts preview position if it would go off-screen

Performance Features

• Local Storage Caching: Prevents repeated requests for the same URLs
• Hover Delay: Prevents accidental previews from brief mouse movements
• Mobile Detection: Applies mobile optimizations automatically
• Lightweight: Minimal impact on page load speed

Best Practices

Design Tips

1. Keep it readable: Don’t make text too small or use low contrast colors
2. Match your brand: Use colors and fonts that complement your site design
3. Test on mobile: Ensure previews work well on smaller screens
4. Consider your audience: Adjust complexity based on your users’ technical comfort

Performance Tips

1. Use hover delay: Set a small delay (200-500ms) to prevent accidental previews
2. Limit preview size: Don’t make previews too large as they can be overwhelming
3. Choose appropriate domains: Exclude domains that don’t provide good preview data

Accessibility Tips

1. Maintain contrast: Ensure text is readable against background colors
2. Don’t rely solely on color: Use text and icons to convey information
3. Test with keyboard navigation: Ensure the feature doesn’t interfere with accessibility tools

Troubleshooting

Common Issues

Previews not showing:

• Check that “Enable Link Preview” is checked
• Verify the correct link types are enabled (internal/external)
• Check if the domain is in your exclusion list

Previews look wrong:

• Review your styling settings
• Check if custom CSS is conflicting
• Try a preset theme first, then customize

Mobile issues:

• Enable “Apply Mobile Optimizations”
• Adjust mobile-specific font sizes
• Consider disabling on mobile if needed

Performance concerns:

• Increase hover delay
• Add frequently accessed external domains to exclusions
• Monitor your site’s loading speed

Getting Help

If you continue to experience issues:

1. Check the Linkilo documentation
2. Contact Linkilo support with specific details about your setup
3. Include information about your theme and other active plugins

Conclusion

Link Preview is a powerful feature that can significantly enhance your website’s user experience. Start with the basic settings and gradually customize the appearance to match your site’s design. Remember to test thoroughly across different devices and browsers to ensure the best experience for all your visitors.