Setup Guide

Introduction

Hello! 🙂

Thank you for using the Littlebay Messaging Template to build your Bubble app. The Setup Guide below doesn't have to be completed immediately upon opening the template's editor, but the changes should be completed before you start building out the other pages of your app.

We hope this documentation, combined with the built-in "Notes" documentation for every workflow, will help you gain a greater understanding of how the template works, and how Bubble works in general as well. If you find anything in the documentation unclear, or if you have any questions pertaining to the template, please don't hesitate to let us know in the Littlebay Forum, or by email, and we will respond within 1 business day.

Thank you so much, and Happy Bubbling!

Faye Watson

The "Hobby" Bubble App Plan

Currently, the template utilizes API workflows in order to create new Conversations and implement the "seen by" functionality used on the "messages" page. Unfortunately, the Bubble "Hobby" plan doesn't allow for API workflows, and they will not run when testing.

If you plan on keeping your app on the Hobby Bubble plan when you launch, please email support@littlebaytech.com so that we can assist you in moving some of the API workflows in the template to the messages page. If you plan on launching your app on a custom domain, Bubble's "Personal" plan or higher will allow for API workflows and no changes need to be made. Please don't hesitate to let us know if you have any questions by emailing support@littlebaytech.com. Thank you again!

Set the "Landing Page" as the new Index Page, and Delete the "Old_Index" Page

How to Set the "Landing" page as new Index page

In the app's editor, go to the "landing" page:

2. Set this page as the new index by selecting Edit --> Make this Page the New Index

3. Bubble will ask if you are sure you want to change this page to the new index page, click Confirm:

4. Now the landing page will be the new index page, and the previous index page (the page which describes the template) is the "old-index" page.

Delete the "Old_Index Page"

Delete the "Old_Index" page by opening the pages/reusable elements and click the trash icon:

2. Navigate back to the Index page in order to customize your app's landing page.

Remove the Template's "Demo" Settings

By default, the template allows Users to test the template's functionality. There are a few settings in place which ensure that template testers' information is not shared with others also testing the template. We need to remove these "demo settings" for the template to work as expected. (No worries at all if you're not sure what privacy roles are yet -- the demo settings can be removed easily by following the instructions below! 😊)

How to Delete the `Header_Navigation_Demo` Reusable Element

This element was only needed to create demo accounts. Please delete it. (Make sure you are deleting the header_navigation_demo element and not the header_navigation element).

How to Remove the "Demo" Privacy Roles

In the app's editor, go to Data --> Privacy. You'll see this screen:

2. On the left-hand side of the Privacy page, click on the "User" data type:

3. This will display all of the Privacy Roles associated with the User data type. Delete the User privacy role at the top which starts with "(Delete this Role)" in the Name:

4. Scroll down and delete the other two User Privacy Roles which start with "(Delete this Role)" in the Name:

How to Add the Logged In Privacy Role

To ensure logged in Users can view other Users' profile information, add this Privacy Role within the User privacy roles:

How to Remove the "Testaccount?" Conditionals

1. Navigate to the Profile page in the editor. Remove the conditionals on the Text "Following: X" and Text "Followers: X" elements:

2. Make the Popup Following/Followers element visible in the editor. Remove the "testaccount?" conditionals from the Button Following Toggle and Button Followers Toggle elements.

3. Remove the 2 "testaccount?" conditionals from the RepeatingGroup Following/Followers element. (Make sure you are deleting the element's 3rd and 4th conditionals).

How to Remove the "Testaccount?" Workflow on the Onboard Page

1. Navigate to the Onboard page and expand the left-sidebar to view the workflow folders (as shown in the GIF below)

2. Click on the C. Demo Only (Delete These Workflows) workflow folder. First, delete the Pageload workflow:

2. Next, delete the custom event:

How to Remove the Image & File Groups on the Onboard Page

1. On the Onboard page, delete the Group Demo Files (Not Needed, Please Delete this Group) element:

How to Remove the "Testaccount?" field

1. Delete the "test account" field within the User data type. To do this, click on the "Data Types" tab in the left-hand corner of the Data page:

2. Scroll down to the "test account" field on the page, and click the trash icon to delete it:

You're all set! The "demo" settings have been removed. 👌

Privacy roles are important because they prevent users from accessing data that they shouldn't have access to. For more information on their purpose and how to set them up, view Bubble's reference guide here: https://bubble.is/reference#Data.Privacy.

Add Your App's Logo

The logo elements used throughout the template consist of three reusable elements:

Logo (Blue)
Logo (White)
Logo (Grey)

How to Change the Logo Elements

Navigate to these elements by clicking the page organizer in the top left corner, and select each Logo reusable element in the Reusable Elements section (shown below)
If you'd like to use a link as your logo, change the link text to the name of your app (Note: you must edit the link text within each of the logo reusable elements manually).
If your logo is an image, you can replace the link element with an image element, within each Logo reusable element.

Warning: Don't expand the size of these reusable elements. Doing so would require changing the size on every page where the reusable element is used, and may interfere with the template's responsive settings.

Change the SEO Description

Having a custom SEO description currently requires the app to be on the Personal Plan or higher. You can add your custom SEO description below while on the Hobby Plan, and then upgrade your plan when you're ready to push to live for the SEO changes to take effect.

How to Change the SEO/Metatags

SEO Settings can be changed to the page and app level. SEO settings affect how the page is previewed when shared on other websites.

How to Change the SEO settings at the App Level

In the editor, go to Settings --> SEO/Metatags
Change the Title, Site Name, Description, and Thumbnail for links. (This is how your app's link preview will appear when it's live and is shared on other websites such as Facebook and Twitter).

How to Change the SEO settings at the Page Level

Navigate to any page in the application and double-click on the page to open its property editor. (In this example, we'll go to the Landing page.)
Scroll down in the property editor and look for the SEO Inputs:
Enter a custom SEO description for that page. If you leave a page's SEO inputs empty, the App level's SEO description will be shown for that page, if that page is shared.

For more information on how your website will look in the link preview when shared on Facebook, learn more here.

Describe your App to New Users

A 1-2 sentence description of your app is displayed to new users in the Sign Up popup. You can customize this to anything you'd like.

Navigate to the pages/reusable elements organizer in the top left corner of the app editor and click on the login/signup popup reusable element (shown below):
Change the text in the Text App Description element by entering your app's description:

By default, the app's Login form description is "Welcome Back! 👋😊". To change this, we need to modify the Text Welcome Back element.

How to Modify the `Text Welcome Back` element

Within the reusable login/signup popup reusable element, the Group Login element is hidden by default.

To make this visible in the editor so that we can edit this, we need to:

Expand the Elements Tree on the left-side of the screen
Expand the Group Login/Signup Container element in that Elements Tree by clicking the + icon
Click on the Group Login element
Click on the Text Welcome Back element to edit the text

Here is a short video of the above steps:

Get a GIPHY API Key

A GIPHY Developers API key is needed for the GIPHY functionality to work on the messages page. GIPHY is a free service, and getting setup only takes a few minutes.

When a User clicks to send a GIPHY on the messages page, a "Powered by GIPHY" image is displayed to the right of the search input (as shown in this video).

GIPHY requires all apps using the GIPHY API to have the "Powered by GIPHY" image wherever GIPHYs are displayed - please do not delete it! 🙂

Learn more about this here: https://developers.giphy.com/docs/

How to Get a GIPHY API Key

Go to https://developers.giphy.com/.
Click on Create an App.
If you already have a GIPHY account, you can use that to login. Or, you can create a new account by clicking "Join GIPHY" underneath the login modal.
After you're signed up or logged in, click on the Create an App button again.
You will be presented with the screen below. Fill out the form:
Click the Create New App button. You will then see your app's title, and an API key beneath it.
Copy the API key, and then navigate back to the template's Bubble editor.
Go to Plugins --> GIPHY -->
Paste your GIPHY API key in the "API key - dev" input:

Now your GIPHYs should display in development mode when your testing the messaging page! 🎉

Once you're ready to push your app to live, you should submit a request for a GIPHY Production API Key. That can be done by clicking "Request a Production Key", which is underneath the API Key of your app in your GIPHY account:

In order to obtain a production key from GIPHY, you must submit a form for your app. The form asks about the purpose of your app, and how GIPHY is being used. They will also ask you to send screenshots and a video of your "Powered by GIPHY" attribution mark. The GIPHY team usually reviews these forms within one business day.

Once they've approved your request for a Production API key, paste that API key in the GIPHY "API Key" input:

Then you should be all set with GIPHY!

Add Your Support's Contact Email

The template's "contact" page allows your application's visitors to contact you. When a new contact message is created, it is stored in the database (as a SupportMessage thing), and a copy of the message is sent directly to your website's support email address so that you can reply to the User by email.

How to Change the Support Email Address on the Contact Page

Enter the support email address in this workflow on the "contact" page:

All emails will be sent to that email address in development and live mode.

Set up a Few User Accounts in Development Mode

There are 5 User accounts in the template by default. You can delete these and create development accounts with your new email/password so that you can successfully test in development mode.

How to Delete the Template's Development Accounts

Go to the App Data tab in the editor by clicking Data --> App Data
On the left-hand side of the screen, click on "All Users". This will show you all of the Users in the app's database:
Select all of the Users by clicking on the checkboxes in each row, and then click the Delete button:

That will empty your database of the template's test User accounts.

How to Create New Development User Accounts

It would be best to create at least two User accounts in development mode of your application, so that you can test the messaging functionality. You can do this by signing up as new Users on the app's landing page (be sure to use a real email address).

To sign up for your app: 1. On the app's index page, click the Sign Up button:

Tip: You can create multiple accounts with a single email address by appending +[anynumber] to the username of your email. For example, if your email is yourname@email.com, you can also sign up with email addresses such as yourname+1@email.com, yourname+2@email.com (and any +number). Even though those seem like different email addresses, all emails will go to the yourname@email.com account for the User accounts created.

Then, create a new account (using your own information) in the sign up form below.

Tip: It helps to create accounts with realistic information, instead of using "Lorem Ipsum" text when editing these User profile accounts. This will make it easier to test your app's functionality as you build, and it will come in handy later if you have to give a demo of your app before it's live!

Designate your account as an Admin Development Account

In the app data tab, click on All Users to view the account(s) you've created. Next to your account, click the pencil icon to edit it (shown below):

Then, set your account's "Admin" field value to true and click the Save button:

This means your account will now have access to the admin page of the template. You will see it as an option in the navigation elements (since it is only visible to admins users):

Note: These changes affect the development database only. When you're ready to launch your app, you should use the "Copy your development database to live database" so that your admin accounts are copied to your live database as well. Doing this will also copy the development databases's Languages app data to your live database. For more information on Bubble applications' development and live versions and databases, please refer to the Application Versions and the General Strategies sections of the Bubble Manual.

Add Your App's Privacy Policy and Terms of Use

Note: Please disregard this section if you purchased the template after 8/31/2019. The template was updated so that it uses "Website's Home URL" instead of a static value for the Privacy Policy and Terms of Use links.

How to Add Your App's Privacy Policy

1. Navigate to the privacy_policy page:

2. Add your app's Privacy Policy within the Text Privacy Policy Body Text element.

How to Add Your App's Terms of Use

1. Navigate to the terms page of the application:

2. Add your app's Terms of Use within the Body Text Terms of Use element.

1. Navigate to the login/signup popupreusable element.

2. Add the live version links of your app's Privacy Policy and Terms of Use to the Text: "By signing up, you agree..." element.

Set Your App's Default Profile Picture

Since Users may not immediately upload their profile picture upon signing up, you can upload a default profile picture to be used until the Current User uploads their own profile picture.

How to Add a Default Profile Picture

1. Go to Data --> Data Types in the editor, and click on the User data type:

2. Scroll down to the "profile picture" field and click on the "Upload" button to upload your application's default profile picture:

Once the image is finished uploading, it will be set as every new Users' default profile picture value.

3. Once the image is finished uploading, click the "see" button to the right of it in order to open the uploaded file in a new tab.

4. Copy the complete URL of the uploaded image.

5. Back in the editor, go to the account page, and add the following condition to the Checkmark icon workflow's "Delete an uploaded file" action, replacing "[paste your default value image URL here]" with the URL you copied in step 4 (without any brackets).

6. You're all set! Step 5 ensures that the default profile picture file is not deleted when the Current User changes their profile picture to something else. However, 'old' profile picture files that are not equal to the default value profile picture will be deleted to ensure that they do not take up any extra space in your app's storage.

Tip: Unsplash provides free, high-quality photos that can be used for your app's default profile picture.

Customize these Pages & Reusable Elements

Landing (Index)

The homepage of the application.

Onboard

The onboarding page of the application.

Profile

The page used to display Users' profile pages.

A series of reusable elements which contain all of the application's navigation elements.

Define Your App's App's Password Policy

By default, the template's password policy requires that new Users enter at least a 7 character password. If you would like to change this policy, please refer to the Passwords, Privacy & Security section of the documentation.

Customize the New Conversation Email Notifications

The template contains two API endpoints that send email notifications when a User starts a new Conversation with them, or with a group.

To customize these notification emails, please refer to this section.

Note: API workflows require that you have a personal plan or higher.

Add a Custom Domain

For more information on how to add a custom domain, as well as other information about your Bubble account settings, please refer to the Bubble manual.

Explore the other sections of the Documentation

For more specific information about each page's design and functionality, please refer to the Development Guides and Design Resources sections.

Join the Littlebay Forum

Visit our forum at https://littlebaytech.com/forum and create an account to ask questions pertaining to this template, find Bubble resources to help you build your app, and showcase your app once it's ready to launch. Also, if you find any errors in the documentation, or if you found anything unclear, please let us know in the forum and we will fix the issue as soon as possible. 🙂

Stay Up to Date with the Template's Release Notes

Any updates to the template or template's documentation can be found in the Release Notes section. Please don't hesitate to reach out to us with any questions by emailing support@littlebaytech.com!

PreviousAbout this Template NextDevelopment Guides

Last updated 3 years ago