Splash Page

(BlaB! WS v21.03+)

A splash page is a web page with a chat widget (who is online, statistics etc) and links to login/register pages. It can also include links to your Facebook page, YouTube channel, a GDPR notice, any other helpful information, links to other pages such as chat etiquette, privacy policy, about us, contact us etc. The splash page is optional and only appears when users navigate to the chat folder or the root of your website (if BlaB! WS is installed in the root folder). If a single splash page is not enough for you have a look at BlaB! Pages.

You can create and test a splash page locally using your favorite web editor and a browser. Then simply copy and paste the HTML code in AdminCP » Additions » Splash Page.

A link to chat /chat/?nosplash=1 skips the splash page.
If you need to include external files - images, CSS, fonts - put them in the folder /splash and link to them in your HTML code in this way: <img src="splash/image.jpg"> <link rel="stylesheet" href="splash/style.css">.
The string %ISLOGGEDIN% in the HTML code is dynamically replaced with 0 or 1 so that you can conditionally hide or display parts of the page. Here is an example:

<div id="chat-enter-div" style="display:none">
    <a href="index.php?nosplash=1">Enter chat</a>
</div>
<div id="chat-login-div" style="display:none">
    <a href="account.php?q=login">Login</a>
    <a href="account.php?q=register">Register</a>
</div>
<script>
isloggedin='%ISLOGGEDIN%';
if(isloggedin=='1'){document.getElementById('chat-enter-div').style.display='block';}
               else{document.getElementById('chat-login-div').style.display='block';}
</script>

We provide a few built-in splash page templates that can be selected from the drop-down menu in AdminCP » Additions » Splash Page. Our splash templates consist of an HTML file, a font file and a background image. You can safely replace the title of the page add or alter any text in the HTML code. Test on a small screen device - a low-end smartphone would be best. If your new title does not fit the width of the screen adjust the size of the font which is set in vw - 1vw == 1% of the width of the screen.

In all our splash templates the background image is only displayed when fully loaded. Until then and while loading the page a blurred copy of the image is replacing the actual background. This blurry copy is embedded in the CSS part of the HTML code.

How to replace the background image in our templates properly

Upload your background image in the folder /splash and set the filename in the CSS part of the HTML code:

body{background-image:url(splash/my-image.jpg)}

Using an image editor (GIMP, Adobe Photoshop) resize your background image to width:90px with height:auto and save it as a new image selecting very low quality (low quality == high compression) for the new JPEG file - 20% or less. What you need is small, barely recognizable image under or close to 1kB.
Upload and convert to base64 the newly resized image and copy the base64 image string
Paste your base64 image string replacing our base64 image string in the CSS code:

#initbg{
    position:fixed; top:0; left:0;right:0; bottom:0; filter:blur(22px); background-repeat:no-repeat;
    background-size:cover; background-attachment:fixed; background-position:center bottom; 
    background-image:url(data:image/img+jpg;base64, HERE-IS-OUR-BASE-64-IMAGE-STRING)
}

That's all.

Page updated: 2022-10-05