If you have not yet created an audience list or interest list into which new names will populate, you will need to create one.  This is very simple.  Select "New Audience List"

You will then provide the list a List Name.

Once you have typed the desired name, select "Create"

After typing in the desired widget name, Click "Create"

You will then walk through the widget set-up.  The first step is selecting a list into which names will populate. You can assign names to populate into a Audience List, an Interest List, or both. In the example below we are adding names to the "Test for widget" list.

You can then opt to have names populate into an audience list. In the example below we are adding to the "Events for kids" field. You may select more than one list.

Subscription Notification allows you notify a subscriber once they have filled out a widget form. This is optional. Please note - the communication would need to be configured in advance.

Select a communication:
Welcome!
Campaign
Select a communication
Communication

Preview confirms your selected options for the widget.  Click "Save" and you have created the widget.

To receive the code to embed the widget. you will want to select the 3 dot kebab menu that corresponds with the desired widget.

You will then receive instructions on embedding the widget to your site.

Close
Newsletter
Embedding the Widget

First, create a div or another preferred HTML element, and give it a unique id. I.e.
<div id="your-id"></div>
Now, add the following code snippet to the end of the body, replacing the id (your-id in this example).

<script type="text/javascript">
      (function () {
        var se = document.createElement('script'); se.type = 'text/javascript'; se.async = true;
        se.src = 'https://messagebee.uniquelibrary.com/form.js';
        var done = false;
        se.onload = se.onreadystatechange = function () {
          if (!done && (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
            done = true;
            window.MessageBee.load('#your-id', { accessCode: '6979d680-df87-4157-a9b9-5eb29ca4a6d0' })
          }
        };
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(se, s);
      })();
    </script>
Configuring the Widget

There are many options that can be used to customize the HTML of the form, which can be done at a form or per input level.

The properties that allow for customization are as follows:

form
firstName
lastName
email
phone
list.wrapper - Applied to the wrapper of the list items.
list.item - Applied to each item in the list.

There are also two stand-alone properties:

successText - The text that is displayed when a form is submitted.
list.title - The text that is displayed over the list of selectable interests.

Below is an example using the most common configuration options. These options are added to the same object as the accessCode:


      { 
        accessCode: '1111-1111',
        successText: 'Thank you for signing up!',
        form: {
          className: 'class-1 class-2',
          id: 'message-bee-form'
        },
        email: {
          placeholder: 'Enter your email address:'
        },
        phone: {
          required: false,
          hidden: true
        },
        list: {
          title: 'Select the options you would like to receive communications a

Uniquelibrary

This guide provides a straightforward process for creating a newsletter widget in Message Bee, making it an invaluable resource for marketers looking to enhance their audience engagement. 

By following the step-by-step instructions, users can easily set up a customized widget to streamline communication efforts. Whether you're new to the platform or seeking to expand your marketing tools, this guide offers clear directions that can save time and improve efficiency.

Create a Newsletter Widget in Message Bee