FreeBar - Email Collection Made Simple

Getting Started

FreeBar.app is a simple way to add an email collection bar to your website. Just add our snippet to your site and start collecting emails.

Installation

Add the following code to your website, just before the closing </body> tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
  (function(w,d,s,o,f,js,fjs){
    w['FreeBar']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
    js.id='freebar-js';js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','freebar','https://freebar.app/api/script'));
  
  freebar('init', {
    title: 'Subscribe to our newsletter',
    description: 'Get the latest updates directly to your inbox.',
    buttonText: 'Subscribe',
    backgroundColor: '#ffffff',
    textColor: '#000000',
    accentColor: '#0070f3',
    position: 'bottom'
  });
</script>

Configuration Options

You can customize the appearance and behavior of the bar by passing options to the init method:

Option	Type	Default	Description
title	string	Subscribe to our newsletter	The main heading text
description	string	Get the latest updates directly to your inbox.	The description text
buttonText	string	Subscribe	The text on the submit button
backgroundColor	string	#ffffff	Background color of the bar
textColor	string	#000000	Text color
accentColor	string	#0070f3	Color of the button
position	string	bottom	Position of the bar (top or bottom)

JavaScript API

You can control the bar programmatically using the following methods:

// Show the bar
freebar('show');

// Hide the bar
freebar('hide');

// Reinitialize with new options
freebar('init', { 
  title: 'New title',
  accentColor: '#ff0000'
});

Collecting Emails

When a user submits their email, it will be sent to our API endpoint. You can access your collected emails from your dashboard.

Customization