Get it

Open External Links,

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

& 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.


    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.


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 plugins/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.

Why doesn’t slideFrame work on mobile devices?

By default, slideFrame is turned off for small screens to optimize viewport space.

Does slideFrame lock visitors on the site?

Not at all! slideFrame includes an “open externally” button in the top right corner of the dynamic overlay. And of course, visitors can always choose to open links in a new tab or window through the context menu.

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 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.