Plugins
Templates
Template Setup Guides

Bufferly - Social Media Scheduling Template

Template page link: https://zeroqode.com/template/bufferly---social-media-scheduling-template-1594055083813x621045886980626300

Introduction

Bufferly - Social Media Scheduling is a no-code template content management tool that helps you schedule posts across social media accounts. Aside from scheduling posts you can as well observe the performance of your content through different metrics such as likes, posts, etc. It comes in three different subscription methods using Stripe. If you want to create an application similar to Buffer, this template should do it.

Features

  • Landing page

  • Responsive design

  • Subscription via Stripe

  • Twitter Integration

  • Admin panel

  • Dashboard

Data Structure

Data type

Field

Type

List?

Notes

User

Represents each person who joins Bufferly. Each user has fields that best describes him.

admin

boolean

A user with admin = yes will become an admin and will have access to the admin panel as well as making changes in it.

currentConstSocial

socialConst

yes

currentSocial

Social

name

text

picture

image

posts

Posts

yes

socialsList

Socials

yes

subscribed

boolean

subscription

Subscription

trialStarted

date

Whenever a user signs up, we store Current date time inside this Field. This is how we will know if he's been using the app for 7 days without actually subscribing to a plan.

Data type

Field

Type

List?

Notes

Drafts

Drafts

date

date

Drafts

listImage

Images

yes

Drafts

postText

text

Drafts

social

Social

Data type

Field

Type

List?

Notes

MenuTab

This data type was created specifically to make the scrolling menu in the mobile version on home.

MenuTab

name

text

MenuTab

number

number

This field holds the element's number, so that we could display it in our RG in the order we desire.

Data type

Field

Type

List?

Notes

Message

Message

content

text

Message

reply

text

Message

new

boolean

Data type

Field

Type

List?

Notes

Post

Post

cancelScheduledAPI

text

Post

date

date

Post

draft

Drafts

Post

image

Image

Post

imageList

Images

yes

Post

postText

text

Post

social

Social

Data type

Field

Type

List?

Notes

Posting_Day

This is a data type used for storing week's days.

Posting_Day

day_number

text

This field stores the day of the week in a number format.

Posting_Day

day_text

text

This field stores the day of the week in a text format.

Posting_Day

posting_times

Dates

yes

This field stores a list of preferred dates of an unique user, when a post should be published.

Data type

Field

Type

List?

Notes

Posting_Schedule

Posting_Schedule

Posting_days

Posting_days

yes

Posting_Schedule

type

text

Data type

Field

Type

List?

Notes

Social

Social contains within itself information about the connected social media on both the frond and backend part of the app.

picture

image

posting_schedule

Posting_Schedule

posts

Posts

yes

social

text

text

socialConst

socialConst

socialType

socialConstType

timeZone

timezone

This field was created in order to setup posting for different time zones.

twitter_oAuth

text

twitter_oAuth_secret

text

twitterBanner

image

user

user

username

text

Data type

Field

Type

List?

Notes

SocialConst

SocialConst data type was created in order to show data about the connected social media mainly on the front end of the app.

SocialConst

icon

image

SocialConst

soon

boolean

SocialConst

title

text

Data type

Field

Type

List?

Notes

Subscription

This is for storing information about user's subscription.

Subscription

canceledByAdminDate

date

Subscription

stripeSubscription

Stripe Subscription

Subscription

SubscriptionActive

boolean

This field is used to represent if the subscription is active or not.

Subscription

SubscriptionCanceled

boolean

This field is user to represent if the subscription was canceled.

Subscription

SubscriptionID

text

This field is used to store the ID of the stripe subscription that was made during the subscription. Using this ID you can upgrade or cancel user's subscription.

Subscription

SubscriptionNextBilling

date

is used to store the next billing date when the user will be charged for a new billing period.

Subscription

SubscriptionPlanName

text

paneanta

Data type

Field

Type

List?

Notes

Token

Token

data

text

Data type

Field

Type

List?

Notes

Variable

WriteRights

boolean

This field is used for limiting the access to the admin page in the preview mode.

Data type

Field

Type

List?

Notes

Weeks

Weeks

from

date

Weeks

number

number

Weeks

to

date

Data type

Field

Type

List?

Notes

Conversation

Conversation data type was created for the sole reason of allowing any admin from the app to be able to answer whatever inquiry a user might have.

Conversation

messages

messages

yes

This field stores messages related to a conversation.

Conversation

users

users

yes

This field stores users related to a conversation.

Pages Description

Pages description will list all pages of the web application whilst describing the purpose of the page, the reusable elements available on page (if available), custom state attached to page, element actions which link to other pages , name of the pages , and notes.

Page Title

States

Element

Notes

Index

This is the landing page of the template. We have a couple of blocks that briefly describes what the template can do, also we have a testimonial block and two CTO blocks, one in the beginning and one at the bottom of the page.

About us

This page is pretty straightforward, it is describing the culture, values and and demonstrates bufferly's team.

Home

Homepage represents bufferly's dashboard. Here a user can add social media accounts and manage its posts. In addition to that he has the possibility to contact the platform's admin. Bufferly also offers analytics, a tab where you can watch your platform's tweets, reply's, likes and mentions. In the draft tab you can prepare your posts for publishing which you can later on post. In the account tab you have information such as your email, with the possibility to change your email/password. You have information about your Subscription plan with the ability to either cancel it upgrade.

Login

Generic login page, with the possibility to login, recover your password or create an account in case you're new to the platform. You can also give our platform a tour using the demo button.

Signup

On this page you have a regular page with inputs to register a new account. You also have the possibility for a free tour using our demo button.

reset_pw

On this page a user can reset his password.

Products

This a page with general info about your platform. You can replace the placeholder text inside, and customize it for your own needs.

Pricing

This page contains general information about the pricing for subscriptions. Each subscription option has information about what does it offer plus the price for those services.

admin

Reusable Elements Description

Reusable Element

States

Type

Notes

Call to action

This is a designed banner that contains a call to action message and button, which can be placed on several pages simultaneously.

Header

This is bufferly's header that is placed on most if not all the pages. It contains 5 different links to the about, products, pricing, resources and dashboard pages. It also contains two different groups that are being shown depending on if the user is logged in or out. In case he's logged in, he will see his name, email and avatar. Whenever a user clicks on either of these a menu will show two options if you're a regular user, and three if you're the admin. If you are not logged in, the platform will show you two buttons offering you the possibility to redirect to the info about the platform or login to the platform. It also contains a group mobile that will be shown if you're navigation on an iPad or a mobile phone. This is done so that we can nest all the header links into a burger menu.

Partners

This is a reusable element that contains within itself logos of companies your platform worked with. You can place this banner on either of your pages for advertising purposes.

Footer

Footer contains links that will redirect you to either our products, login, dashboard or if you click on reach us, you will be able to contact bufferly's admin.

settings

open

boolean

You might ask yourself why we've created an element which is used only once in a reusable element. Well the answer is easy, on the page where we use this reusable we have a repeating group, within that repeating group we needed to show a focus group. Currently bubble doesn't allow focus groups to be attached to elements inside a repeating group. You just won't be able to see the element you're trying to attach the focus group to if you're trying to do that inside a repeating group. Long story short, this reusable contains a share, edit and delete button. It also has popups with corresponding data for each of them. This reusable is attached to the queue tab within the home page. Take note, the home page is our user dashboard, please do not confuse it with the index, which is a totally different page.

The open state which is placed on the settings reusable element, is responsible for setting the state of the repeating group in order for it to be visible/invisible. If the element is clicked and open state value is no it will show the focus group, if the element is clicked and state value is no it will hide the focus group

settingsDraft

open

boolean

Settings draft has the same philosophy as settings in terms of why it was created as a reusable element. This reusable contains a share, edit and delete button which correspond to different popups executing the actions that those buttons describe. This reusable is attached to the drafts tab within the home page. As I mentioned earlier, please do not confuse the home page with the index page. The open state which is placed on the settingsDraft reusable element, is responsible for setting the state of the repeating group in order for it to be visible/invisible. If the element is clicked and open state value is no it will show the focus group, if the element is clicked and state value is no it will hide the focus group.

Things to Note

Admin rights

In order to prevent regular users to access the admin dashboard, there is a security measure in place using a boolean field admin within the USER data type. If you want to make someone an admin, you just have to change this field to yes. After you do that, this user will have a menu option called admin in the drop menu that reveals itself if you click the avatar in the header. If non admin user accesses the admin page, he will not be able to do any manipulations because of the condition on page load that sends this user to index if the field admin field value is no for this particular user.

Under Data tab in the Editor, you could find the Data Type USER which has Admin field with Yes/No condition for when Yes is set the Admin rights are enabled and user can edit and delete from Admin page, however if No is set the Admin rights are disabled for user.

Admin field rights Yes/No

Payments

This template uses default Stripe plugin, as main payment gateway. This app doesn't have a complicated payment workflow or specific payment integrations, it is subscription based. [See the documentation on how to set Stripe Payments in Bubble App.]

See Stripe for more details: https://stripe.com/docs/payments/checkout/set-up-a-subscription

Demo to preview the template