Get it

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
Title ↗︎
External content

“It’s innovative, simple, and effective.”

Max Walton, Webdesigner Depot

Installation
& Usage

  1. 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>
                        
  2. Either

    Activate slideFrame for all links on your website by adding the data-slideframe="true" attribute to your <body> tag. To exclude specific links, add data-slideframe="false" directly to the respective <a> tag.

    Or

    Alternatively, you can activate slideFrame individually for specific links by adding the data-slideframe="true" attribute directly to those <a> tags.

  3. Optionally, you can add a title attribute to your links. Its content will be displayed in slideFrame’s titlebar. If no title attribute 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. The Agency License includes four weeks of initial support. Please make sure to get in touch within the respective time period after purchasing a license in case you need help. Please understand that I cannot offer support for the free Hobby License.

About
the Author

Portrait of Jonas Pelzer

Jonas Pelzer is a designer & developer, known for creating the website builder temper and the web design gallery collected, as well as running the digital type foundry Jonas Type. Besides working on commissioned interaction design work and digital-focussed branding projects, he engages in self-initiated research and practice revolving around topics such as communication, literature, visual culture, the web, and typography. He lives and works in Berlin.