Splash Page

(BlaB! AX Pro 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! AX Pro 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 and you can download more splash templates from our support center. Unzip the content of the ZIP file in the folder /splash and select the template file from the drop-down menu in AdminCP » Additions » Splash Page.

All our splash templates contain an HTML file, possibly 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.