# Setup Guide
## Introduction
Hello! 🙂
Thank you for using the Littlebay Responsive Base 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](https://www.littlebaytech.com/forum), or by [email](mailto:support@littlebaytech.com), and we will respond within 1 business day.
Thank you so much, and Happy Bubbling!
Faye Watson
## 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
1. 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"
1. 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
1\. 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 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 open the workflow folders by expanding the left-sidebar. Then, click on the **C. Demo Only (Delete this Workflow)** workflow folder. Next, delete the pageload workflow. This step is shown in the GIF below:
### How to Add the Logged In Privacy **Role**
{% hint style="info" %}
The "Current User is Logged In" privacy role is in the most recent version of this template. If your template already contains this privacy role, please disregard this step.
{% endhint %}
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?" 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\. Click the User data type, and 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. 👌
{% hint style="info" %}
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: .
{% endhint %}
## 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
1. 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). 
2. 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).
3. If your logo is an image, you can replace the link element with an image element, within each Logo reusable element.
{% hint style="warning" %}
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.
{% endhint %}
## Change the SEO Description
{% hint style="info" %}
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.
{% endhint %}
### 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
1. In the editor, go to **Settings** --> **SEO/Metatags**
2. **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
1. 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.)
2. Scroll down in the property editor and look for the SEO Inputs: 
3. 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.
{% hint style="info" %}
For more information on how your website will look in the link preview when shared on Facebook, [learn more here](https://developers.facebook.com/docs/sharing/webmasters/images/).
{% endhint %}
## 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.
### How to Customize the Sign Up Form Description
1. 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): 
2. Change the text in the `Text App Description` element by entering your app's description:
### How to Customize the Login Form 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:
1. Expand the Elements Tree on the left-side of the screen
2. Expand the `Group Login/Signup Container` element in that Elements Tree by clicking the + icon
3. Click on the `Group Login` element
4. Click on the `Text Welcome Back` element to edit the text
Here is a short video of the above steps:
{% embed url="" %}
## 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
1. Enter the support email address in this workflow on the "contact" page:
{% hint style="success" %}
All emails will be sent to that email address in development and live mode.
{% endhint %}
## 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
1. Go to the App Data tab in the editor by clicking **Data** --> **App Data**
2. 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:
3. 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 follow/unfollow 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:
{% hint style="info" %}
**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 , you can also sign up with email addresses such as , (and any +number). Even though those seem like different email addresses, all emails will go to the account for the User accounts created.
{% endhint %}
Then, create a new account (using your own information) in the sign up form below.
{% hint style="info" %}
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!
{% endhint %}
### 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):
{% hint style="info" %}
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](https://manual.bubble.is/application-settings/applications-versions.html) and the [General Strategies](https://manual.bubble.is/testing-an-application/general-concepts.html) sections of the Bubble Manual.
{% endhint %}
## Add Your App's Privacy Policy and Terms of Use
### 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.
### Add these links to the Signup/Login Popup
1\. Navigate to the `login/signup popup`reusable 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 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.
{% hint style="info" %}
Tip: [Unsplash](https://unsplash.com) provides free, high-quality photos that can be used for your app's default profile picture.
{% endhint %}
## Customize these Pages & Reusable Elements
### [Landing (Index)](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/1.-marketing/landing)
The homepage of the application.
### [Onboard](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/onboard)
The onboarding page of the application.
### [Profile](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/profile)
The page used to display Users' profile pages.
### [Navigation](https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/2.-navigation)
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](https://docs.littlebaytech.com/templates/messaging-template/passwords-privacy-and-security) section of the documentation.
## 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](https://manual.bubble.is/application-settings/custom-domain-ssl.html).
## Explore the other sections of the Documentation
For more specific information about each page's design and functionality, please refer to the [Development Guides](https://docs.littlebaytech.com/templates/messaging-template/page-guides) and [Design Resources](https://docs.littlebaytech.com/templates/messaging-template/design-guides) sections.
## Join the Littlebay Forum
Visit our forum at 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. 🙂
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.littlebaytech.com/templates/responsive-base-template/quickstart-guide.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.