Open External Links,
Internally.
slideFrame lets you open external links in a dynamic overlay on your website. Easy to integrate, customizable with JS and CSS, and open source.
External link
External content
“It’s innovative, simple, and effective.”
Max Walton, Webdesigner Depot ↗
Installation
& Usage
-
To get started, include the CSS file in your
<head>section and the JS file just before your closing</body>tag.
<link rel="stylesheet" type="text/css" href="slideFrame.css" /><script src="slideFrame.min.js"></script> -
Either
Activate slideFrame for all links on your website by adding the
Ordata-slideframe="true"attribute to your<body>tag. To exclude specific links, adddata-slideframe="false"directly to the respective<a>tag.Alternatively, you can activate slideFrame individually for specific links by adding the
data-slideframe="true"attribute directly to those<a>tags. -
Optionally, you can add a
titleattribute to your links. Its content will be displayed in slideFrame’s titlebar. If notitleattribute is provided, the link text will be shown.
FAQ
What are the benefits of slideFrame?
slideFrame allows your users to stay on your site while visiting external sites you’ve linked to, reducing bounce rates. It enhances the user experience with a dynamic content overlay and a smooth slide-in animation.
Can I use slideFrame on any link?
slideFrame cannot be used when linking from an HTTPS site to a non-HTTPS site due to security restrictions.
In addition, some websites may have security measures in place (such as CORS and SOP) that restrict loading their content in iFrames. While slideFrame cannot override these restrictions, you have the option to exclude specific links. Please note that slideFrame is not compatible with most social media sites for this reason.
Does it work on mobile?
Yes!
Can slideFrame be integrated on any site?
It should work out-of-the-box on most websites. In some cases, you may need to make small adjustments if your existing code conflicts with slideFrame, which could affect appearance or functionality.
Can I use slideFrame with Bootstrap?
Absolutely! slideFrame is compatible with Bootstrap.
Can I use slideFrame with jQuery?
Yes, slideFrame can be used with jQuery, but it doesn’t require jQuery to function.
Does slideFrame work with WordPress or other CMS platforms?
slideFrame should generally work on any HTML/CSS/JS site, including websites built with CMS platforms.
Can I use slideFrame with React, Svelte, Vue, or other frameworks?
If you want to use slideFrame with a framework like React, Svelte or Vue, you may need to look for ways to include JavaScript libraries in the respective framework. Please note that slideFrame has not been tested with these frameworks.
Does slideFrame lock visitors on the site?
Not at all! slideFrame does not interfere with the default behavior: Opening links in a new tab through the context menu or by holding the Meta key (cmd/ctrl) will still work. Additionally, slideFrame includes an “open externally” button in the top right corner of the dynamic overlay.
Is slideFrame customizable?
Yes, the visual style and animation of slideFrame can be customized using CSS.
What about semantics and SEO?
slideFrame doesn’t change anything about your HTML semantics. It follows the principle of progressive enhancement.
Do you offer support?
No, active development and direct support have been discontinued. However, slideFrame is now available as open source, and you can find setup instructions and usage details in the documentation. Feel free to fork, customize, and adapt it for your own projects!
I like slideFrame. How can I say thank you?
That’s lovely to hear! You can buy me a coffee and check out my other projects. :)
About
the Author
