Open External Links,
Internally.
Enhance your website’s user experience and reduce its bounce rate
by integrating external content into your site with a dynamic overlay.
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.
Can slideFrame be integrated on any site?
slideFrame is designed to work on most websites. However, in some cases, you may need to make adjustments if your existing code conflicts with slideFrame, potentially affecting the 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 relevant framework. Please note that slideFrame has not yet been tested with these frameworks, and as such, official support is currently unavailable.
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. I consider adding a configuration file in the future, based on the demand from users.
What about semantics and SEO?
slideFrame doesn’t change anything about your HTML semantics. It follows the principle of progressive enhancement.
Will there be free updates?
There will be free minor updates to enhance the functionality and address any issues. However, major updates may require a separate license. If you purchase a license for the current version, you will receive updates until the release of version 2.
Do you offer support?
The Standard License includes one week of initial support to ensure the correct installation and functioning of slideFrame.
About
the Author
