Plugins
Templates
Powered By GitBook
Bufferly - SMM Scheduling like Buffer Template

Introduction

Bufferly is a content management no-code template that allows you to build tools for scheduling as well as analysing their performance across social media accounts using metrics such as likes, posts, etc. This template is structured as a SaaS product with 3 plans available - free trial, monthly and annual. Plans and payments are all integrated using Stripe. At the moment Bufferly comes with Twitter integration only but it might be possible to do other integrations as well.

Possible Use Cases

    With this template you can build an app similar to the very popular Buffer app.
    You can use this template to build an internal content management system for yourself or your company and expand it by adding various functionality that would be unique to you.
    You can use this template to implement any scheduling or planning functionality
    Also, you can use this template to build apps that are built around twitter integration and can serve as twitter client or analysis tools.

Features

    Twitter Integration
    Content Planning Dashboard
    Landing page
    Responsive design
    Recurring payments and subscription plans via Stripe
    Admin panel
PAID PLUGIN INFORMATION: The template comes with a paid plugin - Twitter User Oauth - that enables twitter posting on behalf of any user. You would need to subscribe to it (or buy it) in order to use this template

Data Structures

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

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

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.]

Demo to preview the template

Last modified 6d ago