Engage Your Visitors Using Splash Pages in Drupal 7Engage Your Visitors Using Splash Pages in Drupal 7


 Chances are when you launch your site you are not feature complete. Often times it is best to get a site launched as quickly as possible and then work on adding additional features down the line. However, this creates a problem: how do you engage your visitors and let them know about new features?


This day in age you can't guarantee that users will land on a specific page. Content-rich sites might have a hard time targeting their calls to action to help people learn about new features, especially if they already have their CTA's carefully chosen on the site. One way of dealing with this is by using splash notifications. This method might have some contention in the web community because you have to slightly disrupt the initial user experience in order to deliver your information, but if your message is paramount to your future user's experience, then I would say it is an acceptable tradeoff.


Today we're going to be setting up a basic splash page using a lightbox version of the Splashify module.



Define and Theme Your Message

You can see above that I mocked up a simple subscription message. My call to action is going to take users to a sign up form, but remember that your splash page will function like any other normal Drupal page, so you can embed forms, fields, or any other type of information that you need to. This means you have some powerful options when it comes to your call to action, because simple tasks can actually be done directly on the splash itself. In my case we are going to stick with a basic embedded image that links to a separate form page. Head over to /node/add and create your content. You should plan ahead to make sure your message width is slightly narrower than your actual site (e.g 600px for a site whose width is 960px, or 70% width for a fully responsive site). That way when the lightbox appears it is clear that your regular site content is behind. A simple click on the lightbox close icon or the background will close the window.
Also note your content URL as you will need it during configuration.
Setup Drupal

Go and grab Splashify, Libraries, and Colorbox modules and set them up as per the readme instructions for each. Install your modules on your Drupal installations and then and pop over to /admin/config/system/splashify. Note that while I'm not going to make any changes to my Colorbox settings, you should feel free to tweak those as you need to (/admin/config/media/colorbox).
You'll notice 4 tabs in your Splashify configuration.

On the "When" tab you select when your splash page will appear to visitors. In my case, I only want to show it to users that are not logged in, and I only want to show the window once (this value is set by a cookie and will reset if the user does clear their cookies). Be wary not to nag your users with these settings. Setting it to something like "daily" can actually harm your site by turning away people.
"Where" I will show my splash is going to be "all pages" meaning my splash displays on any page the user lands on. You can set yours to show only on specific pages if you want instead.

"What" I will show is the URL of my content created earlier. As you can tell, you can actually make multiple types of splash pages and show them in random order or even rotate through them progressively.

Finally, "How" is going to be set to "Colorbox" and I give the width and height of the box to show.

Regarding Mobile
As you may have noticed, Splashify includes settings for mobile-specific users. This is a must if your original splash content isn't responsive or you have and entirely different message to send to mobile users. It requires an additional library for mobile feature detection, but it is a great addon for this module if you need to use it.
That's it! Remember to use splash pages when you really need to, don't duplicate calls to action that already exist on your content pages, and always try to use analytics to see if your splashes are effective!

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.