Product Updates

New Thrive Leads Template: The Sticky Slide-in

Author Image

Author
Hanne   114

Updated on March 2, 2022

"Good Afternoon! Would you like to know when our next exposition is happening?" the museum clerk asks when you walk in.

"No, thank you. I'm just looking around for now" you answer.

"Okay, enjoy the photo exhibition, sir."

15 minutes later, after you've made your way through, decided you loved the exhibition and want more, you stop to ask the clerk: "Excuse me, how can I stay informed about what happens at the museum?"

"Simply give me your name and email sir and I'll add you to our list."

2 minutes later, while walking out, you're reading the welcome email on your phone and starting to plan which exposition to explore next weekend.

Now imaging what would have happened if after greeting you, the clerk simply disappeared... Would you still have signed up?

Same holds true for your website visitors. If they can't find where to sign up, they will just leave, never to be seen again. 

Discover how the Sticky Slide-in can fix that problem for you!

More...

What's a Sticky Slide-in?

The close icon actually shows the "sticky" slide-in.

A slide-in is an opt-in form that - as the name suggests- slides in from the side when someone arrives on your website. It can appear on page load or after a certain time or scroll percentage.

As explained in our Beginner’s Guide to Choosing the Perfect Opt-in Form Type it's slightly less intrusive than a scroll mat, screen filler or lightbox but it will still grab your visitors' attention because it appears after they arrived on the page.

The "normal" slide-in will appear and you'll have 2 options:

  1. Sign-up
  2. Close the form

This means once the visitor closes the slide-in, they will not be able to find this opt-in form anymore. It has disappeared.

The Sticky slide-in, however, offers a third option... When the visitor clicks on the "close" button, the slide-in doesn't entirely disappear, but shrinks so it doesn't hinder reading the content anymore.

The biggest advantage of this: when the visitor is ready, they can click on the small Sticky slide-in and sign up.

How it Comes Together

You'll need 3 states: Default, State 1 (sticky) and the lightbox state

In Thrive Leads, you have a very powerful feature allowing you to add different states to an opt-in form.

This feature is what allows multiple-choice opt-in forms as well as the sticky slide-in.

For the sticky slide-in we'll need 3 different states:

  1. The default state. This is the "normal" slide-in
  2. State 1. This is the small "Sticky" slide-in
  3. The lightbox state. When someone clicks on one of the two slide-in states, they are presented with a lightbox to opt-in.

To create a new state in an opt-in form, click on the green plus icon in the bottom right corner of the Thrive Leads canvas. You can see this in the video at 2.38 min.

STEP 1: Create your default state.

STEP 2: Add a new state and create the sticky slide-in.

STEP 3: Add a new lightbox state and create the lightbox.

STEP 4: Click content of the default slide-in and use the animations and actions panel to trigger the lightbox. (3.14 min)

STEP 5: Click on the close icon in the default state and use the animations and actions panel to connect the close button with state 1. (4.10 min)

STEP 6: Go to state 1 and use the animations and actions panel to connect it to the lightbox state.

Et voilà... The sticky slide-in is now set up.

No time to do this from scratch? Simply use the "Sticky Slide-in" template available in Thrive Leads and you're good to go!

More Creative Thrive Leads Uses?

This is a fun/advanced use of Thrive Leads and I would like to know: Do you like this? Or would you prefer to see something different? Let me know in the comments below!

Author Image

by Hanne  February 21, 2018

114

Enjoyed this article ?

You might also like:

3 New Features & What’s Coming Soon to Thrive Themes

 Read article

2 x New Themes and New Features in Thrive Themes – June 2023

 Read article

9 Great New Features in Thrive Themes

 Read article

Leave a Comment

  • This is a great example of the power & flexibility of Thrive Leads. Will try it on my site now. One question for you: how do you suggest we use it on mobile? 3 states or the default 2 states?

    Reply

    • Thanks Baidhurya, I would suggest not using a slide-in on mobile. I don’t think it’s the best opt-in form type. I would use the slide-in on desktop and use a ribbon on mobile.

      Reply

      • Good question Baidhurya, just about to ask the same, thanks for the answer Hanne, sounds perfect. I’m, gonna give this ago on a couple of my sites.

      • Thank you Hanne for your response. I also use ribbons on mobile instead of slide-ins. I was thinking about having a sticky icon sort of thing on the side and once you click on that, the ribbon would open and if you close the ribbon, the icon will appear. Let me actually test it and share the results with you.

        A completely unrelated question: When can we expect the new themes? Any chance of it coming out in Q1? I know you can’t share an ETA but would be good to know if it’s planned for Q1 or Q2.

  • What a fantastic implementation, Hanne – thanks very much. I think this is especially important in light of what I hear about Google cracking down on pop-ups and forms that take over the entire viewing page. Thanks again for all you guys do – it makes a big difference.

    Reply

  • Hi Hanne!

    Thanks for sharing this! Have you tested the look of this on mobile, or do you recommend deactivating it for mobile? Even after it’s closed, that little square could be quite intrusive on a narrower device. What do you think?

    Reply

  • really like this new feature, Hanne, not in your face and doesn’t disturb the visitor reading the post/page content.

    Reply

  • Really nice! I really appreciate these mindful & valuable shares (incl. the DONE-FOR-YOU template part!!) You make it so easy to be a happy lifetime customers… :))

    Reply

  • Hi Hanne, another fantastic improvement. It just gets better and better. I can’t wait to try it out, thanks to you and the team 🙂

    Reply

  • Thanks Hanne,
    This insertion of the slide-in has always bothered me. It covers too much text.
    Thank you for this good suggestion. Can I also use my slide-in or just the template. I’ll have to rework it.

    Greetings from Germany
    Gerhard

    Reply

    • You can do either one. If you already have a slide-in you can simply rework the design to make it smaller or add a state to create the “sticky” part.

      Reply

      • Danke Hanne,
        muss ich jetzt nur noch sehen, wie klein es sein muss.
        Excuse me:
        Thank you Hanne,
        I just need to see how small it must be.

      • Hi Gerhard, that will depend on the theme you’re using… I would suggest no more than 100 px (but you should double check)

  • Thank you so much! I have been looking to use something simple and effective yet inobtrusive to my visitors. Awesome! I have to say that I am a nw user here but have become a 100% devoted fan! Your products are amazing! Thanks!

    Reply

  • As usual, awesome content Hanne. Quick question/favor: can you show me where the template is? And, in future videos, when you include a template, could you show us where it is/how to get it–using a “live” example? That would be fantastic!

    Reply

    • Hi Dave, I made this video before the template was available 🙂 But I could include it in the blog post as an image explanation.

      Reply

  • Do you have any data on opt-in conversion rates with this “persistent mini” slider format? Would love to see A/B test results of a typical slider vs. this slider. Thanks!

    Reply

  • Great tutorial and idea Hanne. Thrive Leads just keeps getting better and you didn’t even have to build new features :).

    Reply

  • Hanne,

    Given your email saying “almost on auto-pilot, my mouse goes to the little X in the upper right corner. Click. Close slide-in.” – and how I always have that reaction as a reader, I don’t like using pop-ups / slide-ins on my blog.

    But I love your small sticky idea.

    Would it be possible to create an opt-in in that consists ONLY of the small box and (and not the big slide-in). One that follows the reader like a ribbon as in your example above? They click on it and it opens the light box…?

    Reply

  • Thank you so much Hanne,

    This is a great functionality and I can really relate to it based on the story telling included on the blog post.

    I will definitely look into it, as well as the template (plus customization).

    Is this something we can achieve with any type of optin form?

    For instance, since you recommend using a ribbon for mobile, would the “sticky” functionality still be achievable?

    Thank you.

    Reply

    • Hi Luis,

      Yes in theory you can make any form sticky (for the ribbon you could simply have a larger version and a smaller version without close button).
      But please always think about what the experience would be for your visitors 🙂

      Reply

  • I was just about to say it would be great if you guys could add a template for this to save us all some time and then then next thing out of Hanne’s mouth was “I created this template for you.”

    I know I should never doubt how awesome your guys are at Thrive! Thanks

    Reply

  • Hanne,

    Thanks for showing this, I’ll be implementing it on my sites.

    Question; where is the video Shane made showing the correct size and location for an hover opt-in box on mobile? I’m not using the right keywords in my search.

    He made the video in response to google saying they would penalize sites that showed a full screen pop up on mobile.

    Thanks again for all the great tutorials.

    Cheers
    Mike
    Portland, Oregon USA

    Reply

  • I will have to A/B test this in the future! By the way, noticed that slide-outs for me work way better than screen filler! :))

    Reply

  • Hi Hanne,

    My biggest take away and I quote you, “When something gets my attention, I pay attention.” You have my attention; I think I want to marry you, oh, wait a minute, I’m married… Seriously, I am paying attention…

    I’m happy to add that I feel as though I know not only you, but Stefanie and Shane too when ever any one of you present because I always feel like I’m hearing from friends when engaged with your companies content. It seems that your brand and team is clearly resonating with many marketing professionals out there, and that of course includes me! Wait, didn’t I kinda already say that?

    Any way, your presentation here, is exactly what I have come to expect, I learn from you guys every time I watch or read one of your publications, this one is certainly no different! More value, more benefits, more great features just keep on coming our way, making our job and life easier, more productive and therefore happier, thank you so much once again!

    Reply

  • Can I do this with an existing lightbox design (instead of a slide-in)? In other words, can I create a new state for my lightbox which would have it become a small sticky sign-up in the corner? I tried this out but can’t figure out how to have the new form not also be a lightbox. Is there a way?

    Reply

    • Hmm Not that I know off. What you could do is have a lightbox AND have a sticky slide-in as the default state of the slide-in. So basically the sticky slide in is always there (even when the lightbox shows)

      Reply

  • I just HAVE to say it: Thrive Themes is THE single best thing I have ever purchased online. This is just one of the many examples I keep getting again and again.

    As a full Thrive Membership member, I could say that my life has become a lot simpler since I signed up.

    My most sincere thank you. I still have to change my subscription from quarterly – if you guys make a lifetime license I’d certainly consider it, you really are that great.

    Reply

  • I absolutely love the idea of a little reminder sitting in the corner after the first one has been ‘clicked away’. Especially since it’s not obtrusive. I will also add a ‘no-thanks’ button just in case it really annoys some people, as not everybody will appreciate even the little reminder.

    Reply

  • What a great idea! I love the sticky slide in – as a reader, I might not be ready to sign up when I first land on a site, but if I like the content I might decide to do so before I leave. So the sticky is always there in case I change my mind. Thanks for showing us how it is done.

    Reply

  • Hi Hanne.

    Love the simplicity and the potential that this function offers.

    The scope for effective use of this sticky slide-in is phenomenal.

    Can this be set up to show a three ‘button’ option that each has a different result, i.e. – Tell Me Know – Tell Me Later – No Thanks ?

    Reply

  • Hanna, I am having trouble doing this on my site. I just don’t know the process of setting up all the boxes to enable the design you instructed. Where can I get further info? Thanks!

    Reply

    • Hi Robert,
      The easiest way would be to use the template that’s in the library. All the different states and designs are included in that one template (create a new slide-in and choose sticky slide-in as the template).

      Reply

  • Hi Hanne, where do I find this template, sticky slide in? I already created such a form, but deleted it by accident. Now it disappeared!?

    Reply

  • Hi Hanne,

    I used the sticky slide in template and edited the design to fit in with our branding, I’ve changed the setting so it pops out on the left-hand side but it still seems to be on the left. What do I need to do in order for the sticky bit to be on the left-hand side of the screen and not the right?

    Reply

    • Hi Assima,
      in preview mode it will always show on the right side. But on your side it will show left if you picked left in the settings.

      Reply

  • Great Opt-In form and even BETTER Training! Love it! I am going to add the Sticky Slide-In (as shown in the training) on a Client Site. Thanks Hanne. Great Stuff as usual! 🙂

    Reply
    • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}