- Created : 10/11/2023
- Updated : 02/12/2024
- Support Email : support@pixelnx.com
Introduction
PixaSocial - Simplify Social Media Scheduling with PixaSocial - Your Ultimate Planner App.
PixaSocial is a user-friendly Social Media Posts Planner App that leverages the power of React JS technology. This versatile tool provides both admin and user dashboards, ensuring a seamless and enjoyable editing experience.
With PixaSocial, you can effortlessly create and schedule posts for various social media platforms, including Facebook, LinkedIn, Instagram, Pinterest, and YouTube. The user-friendly dashboard simplifies the process of managing and organizing your content.
The admin dashboard offers comprehensive control over users, templates, and assets, while the built-in editor allows you to craft visually appealing images and posts. You have the flexibility to customize every aspect of your content, including text, images, freehand drawing, filters, and the addition of shapes, resulting in captivating and stunning posts.
In addition to the admin dashboard, PixaSocial also features a remarkable user dashboard, ensuring a smooth journey for users. Here, individuals can create their own posts, images, and seamlessly integrate their desired social media accounts.
Unlock Your Social Media Potential with PixaSocial : Plan, Create, and Shine!
Demo Login Details
Admin Login Details
- URL https://pixasocial.pixelnx.com/
- Email : admin@pixasocial.com
- Password : Admin2024@#
User Login Details
- URL https://pixasocial.pixelnx.com/
- Email : testuser@pixasocial.com
- Password : TestUser2024@#
Script Created Date:
Please check Live Preview:
Creative Author Portfolio:
Features
There are more than enough features squeezed in this script like
Features of the admin
- Dashboard
- User manage and listing
- User Listing
- Templates Management
- Create and customize post
- Create Assets
- Create Assets Category
- Create Frames
- Manage Plans
- PayPal, Stripe, and RazorPay Payment Methods
- SMTP details
- View Transaction List
- Add image or video in the post
- Image Masking (Beta Version)
- Element Grouping
- Post Analytics
Features of the User Dashboard
- Dashboard
- Create Post
- Social Media Account integration
- Schedule Post
- Post Calendar
- Image Masking (Beta Version)
- Add image or video in the post
- View failed post notification in the calender
- View social media compatibility indicator for posts
- Element Grouping
- Image Creator
Features of the Script
- User Friendly
- Responsive
- Browser Compatible
- Lightweight
Script Installation
Note
1. Before installing the script please make sure that you have nodejs installed on your server and for Database MongoDB is neccessary.
2. You can check the node version from the terminal/cmd just type node -v.
Update Note
You need to take the backup before update the script.
How To Install Script
Step 1 Extract the (PixaSocial)file that you have received from the Codecanyon. Inside that you will get Main File and Code.
Step 2 Open the terminal or Command Line Prompt (cmd) on the system.
Step 3 Navigate to the folder where you have extracted the file through commands.
3.1 Run Command "Cd Extract_file_location" (PixaSocial).
3.2 Run Command "Cd file_name" (PixaSocial).
Step 4 Then install npm modules. Run command npm install
Step 5 Run command
If Setup on local server (localhost)
Step 5.1 Run command npm run dev
If Setup on live server
Step 5.1 Run command npm run build
Step 5.2 Run command npm start
Step 6 Then Navigate to next.config.js file and then update the following mention fields below
Live URL : Base URL/ Domain URL
Jwt token details : Token Secret and Token Life
S3 Bucket Details : AWS bucket details: Secret Access key, Access Key ID, Region, Max Upload Size, Bucket Name, and S3 Path
ChatGPT API Details : OpenAI API key
mongodburl : MongoDB connection URL
Facebook App Details : FACEBOOK_APP_ID and FACEBOOK_SECRET_KEY
Linkedin App Details : LINKEDIN_CLIENT_ID and LINKEDIN_SECRET_KEY
Pinterest App Details : PINTEREST_APP_ID and PINTEREST_SECRET_KEY
Mandrill App Details : MANDRILL_KEY and MANDRILL_EMAIL
Note If you have Ubuntu server then add prod in the Environment field and your Ubuntu server must have chromium. In case of Windows server add "dev".
Step 7 After that, open the Mongo DB and paste the "MONGODB_CONNECTION_URL" in the field.
Note: How to MongoDB connection URL Check here .
Step 8 To Import the demo data. Please go to the import section. click here
Demo Import
Step 1 : Open Mongodb compass and past Mongodb connection URL, and then connect.
Step 2 : Please click on the database name. In our case is, "pixasocial" .
There is initially only one collection (users) in the database.
1. users (Shown in the screenshot)
Note : For above collection "pixasocial_" prefix is used but please match and use the same prefix as you added in the next.config.js file
Note : Do not use any prefix for users collection.
Step 3 : Click on the "Create collection" option.
Step 4 : Enter the collection name. then click the "create collection button" .
Step 5 : After that click on the "users" collection
Step 6 : Import the user data in the users collection. To download the PixaSocial.users.json file click here
Step 7 : Similary, create a new colloection named "fonts" and import the fonts data in the "fonts" collection. To download the PixaSocial.fonts file click here
Step 8 Once the demo data has been imported successfully, then type the domain-name/folder-name/ on browser's address bar, like : https://domain-name.com/folder-name/and you will get login page of the admin panel. For login use the credentials mentioned below
- Email : admin@pixasocial.com
- Password : Admin2024@#
Mongodb Setup
1. How do you get MongoDB connection URL.
Step 1 : Sign Up in MongoDB, or if you already have an account, then Login.
Step 2 : Login on Mongodb, then you will see the below screen. At this screen, you click on the first "visit MongoDB Altas" option.
Step 3 : Now at this step, you have to create a database. Please click on "Build a Database," as shown in the screenshot.
Step 4 : After that, select the free plan and click the Create button for the database. (later, you can upgrade your database plan as needed).
Step 5 : Firstly, create a user for the database at this step, update the details and create the user.
Step 6: Once you create a user, you will see this screen.
Step 7: Now click on the database showing in the left sidebar. Then click on the "Browse Collections" option.
Step 8: Click on the "Add My Own Data" option at this step.
Step 9: Now add your database information.
Step 10: Once the database has been created, you will get this screen.
Step 11: Now click on the "database" menu, then click on the "connect" option.
Step 12 : In this model, please click on the compass option.
Step 13 : In this model, you will see the connection URL. Copy this URL.
Step 14 : Now you will have your MongoDB connection URL.
mongodb+srv://pixasocial:<password>@cluster0.nsuha2x.mongodb.net/ |
In this URL you have to add your username, password, and database name.
For Example :
Username = pixasocial, password = pixasocial@123 , Database name = pixasocial
The final MongoDB connection URL will be like this (Please update the correct details in this connection URL).
mongodb+srv://pixasocial:pixasocial@123@cluster0.nsuha2x.mongodb.net/pixaurl?retryWrites=true&w=majority |
You have to add the MongoDB connection URL to the next.confiq.js file.
LinkedIn App Creation
How To Create App in LinkedIn
Step 1 First go the link https://developer.linkedin.com/ and login to your account, if you already have an account. Else click on Sign Up button to create a new account.
Step 2 Login to your developer account, if you already have a developer account. Else click on Join Now to create a new account.
Step 3 After login, click on Create App button.
Step 4 You will be redirected to screen. Here enter the basic information like App name, your company's linkedin page URL, Privacy policy URL, add app logo and after selecting agreement check box, click on Create App button
Step 5 After that, enter the two products in your App Share on LinkedIn and Sign In with LinkedIn using OpenID Connect . To add them click on Request Access button.
Step 6 Then Navigate to Auth screen. Here you will see the Application Credentials : Client ID and Client Secret.
Then add the redirect URL for your app by clicking on Edit icon.
The redirect URL should be of the following format : Your domain live URL + "/social/linkedin"
Step 7 And the app is created in LinkedIN
Video on how to create LinkedIn App
Facebook App Creation
How To Create App in Facebook
Step 1 First go the link https://developers.facebook.com/ and login to the Facebook account.
Step 2 After login, click on My Apps option.
Step 3 Then click on Create App button.
Step 4 Select the last option "Other" and hit the Next button.
Step 5 Then select the App Type as Business and click "Next" button.
Step 6 Enter the details like app name, email, select the account and click "Create App" button.
Step 7 Now we have to add three products to App Instagram Graph API, Webhooks, and Facebook Login for Business
7.1 How to Setup Facebook login for Business
Step 1 Click on Setup button.
Step 2 Enter the Valid OAuth Redirect URIs, select URL in Allowed Domains for the JavaScript SDK (these will be your live URL) and click on Save Changes button.
Step 3 After that go to App Settings >> Basic. Here, enter the basic information like Name, App Domains (Domain URL), Privacy Policy URL, Terms of Service URL, app icon, etc. Hit the Save Changes button once you added the details.
Note This contains App ID and App secret key so please copy it and save for further usage.
Step 4 Then we need to provide some permissions and features for our app. For that Go to App Review >> Permissions and Features. It contains various permissions and you need to click on "Request Advanced Access" button to allow the permission.
Following permissions are required for app : email,pages_manage_posts,pages_show_list,pages_read_engagement,business_management,instagram_basic,instagram_content_publish.
Now, the Facebook login for Business product has been added.
7.2 How to Setup Instagram Graph API
Step 1 Go to the Dashboard >> Instagram Graph API. Click on SetUp button.
You will be redirected to this screen and your Instagram Graph API product has been setup.
Note Please make sure that privacy policy and terms and Services URL should be of following format.
Privacy Policy : your domain Live Url + /policy/privacy-policy
Term and Service : your domain Live Url + /policy/terms-and-services
Video on how to create Facebook App
Pinterest App Creation
How To Create App in Pinterest
Step 1 First go the link https://developer.pinterest.com/ and click on My Apps option.
Step 2 After login you will be redirected to Dashboard. Click on Connect App button to create new app.
Step 3 Enter the basic information like add app icon, App name, Company namr, Company website or App link, Privacy policy, App purpose. Then select option 1 in Developer purpose, Option 4 - Pinner App in Use Cases and Option 1 and 2 - Pinners and Creators in Audience. After adding the details hit the Submit button.
Note You will see the created app in the dashboard screen. Pinterest team will review your app and once the review has been done, Pinterest team will provide you the trial access.
Step 4 Once you will get the trial access, click on Manage option.
Step 5 Here you will get App ID and App Secret key. Please make sure to save them. After that add the Redirect URL.
The redirect URL should be of the following format : your domain live url+ "/api/social-pintrest"
Step 6 Once the Pinterest team will provide you the Trial access, you will get Upgrade button. Click on the button, enter all the information and Submit the app to get the approval access.
Video on how to create Pinterest App
YouTube App Creation
How To Create App in YouTube
Step 1 First go the link https://console.cloud.google.com/ and login to your account, if you already have an account. Else create an account.
Step 2 Create a New Project, for that Click on Project dropdown. A popup will appear, click on NEW PROJECT option.
Step 3 Enter the details of the project like Project Name, Organisation, and location details. Then hit the Create button.
Step 4 You will be redirected to dashboard screen, here select the created project. Click on it.
Step 5 You will get the Project screen, containing the details of the selected project. Search the YouTube Data API V3 in the search bar and select it.
Step 6 Click on Enable button.
Step 7 After enabling the API, click on the OAuth consent screen option. Select the User Type as either Internal or External.
Step 8 Enter your app details like App name, support email, add logo, app domain and developer contact information. Then click the Save and Continue button.
Step 9 In Next step, you need to add scopes to the app. For that click on the "Add or Remove Scopes" button. A popup will appear, in which you need to select the following scopes :
/auth/userinfo.email, /auth/userinfo.profile, and /auth/youtube (search youtube in the filter)
After adding scopes click on Update button and Save and Continue.
Step 10 Add the test users, in this step and click "Save And Continue" button. After that you will the summary of the created app. From here click on the "Back To Dashboard" button.
Step 11 From here, you can Publish the app and confirm the verification process.
Step 12 Navigate to Credentials option >> Create Credentials >> Select OAuth Client ID.
Step 13 Select the Application type as Web Application. Add name, authorized Javascript origins, and redirect URIs. Then, hit the Create button.
For getting the Authorized Redirect URL, go to the next.config.js file in the code. In this file add the URL in GOOGLE_REDIRECT_URIS parameter in the following format domain_name/api/social (domain_name means Live_URL) Add this URL in the Authorized Redirect URL field
Step 14 You will get the client ID and Client Secret. Copy the key and paste in the next.config.js file.
Video on how to create YouTube App
Admin Dashboard
Admin Dashboard comes with the various backend settings to manage the platform.
DashBoard
Admin dashboard settings contain the counts of Total Posts, Total Scheduled, Total Published, Total Templates and Total Users.
Users
It will show the list of all users. The admin can also view, add, edit, delete the existing users.
On adding new user, admin can enter basic details, select user type as User or Template Creator, select plan and select user status as Active or Inactive
Templates
Using the templates setting, you can create new templates, edit, delete, view and change status of existing templates.
How to Create New Template
1. Click on "Create Template" Button and enter the template title, select the layout as Portrait, Square, Landscape and Custom Size.
2. An editor screen will appear containing various editing elements. You can customize your template with a user-friendly editor.
Settings : You can enter title, resize the template, select background and default colour.
Text : You can enter the text and can also customize font family, size, text alignment, colour, BG colour, and many more.
Image : You can add images, crop the image, apply image filter, customize image using editor and can also create a group.
Shapes : In this setting you can select the frames and shapes that was added in the Assets section. With frames option image masking can be accomplished.
Filter : With this option, you can filter the image.
Drawing : Drawing setting allows you to draw a line or any shape using pencil option.
Assets
This setting will show the list of assets. Admin can also filter Assets by Category, add new Assets, Assets Category, and Frames.
Add Asset
To add new asset, click on "Add New Asset" button. A popup will appear where you can upload image (supports jpeg, svg, and png format), enter tag and select category.
Note: The added assets will appear under "Shapes" setting of the editor.
Category
It will show the list of the Assets Categroy. Admin can add new category, edit or delete the existing categories, active or deactive them.
New Category You can add new asset category by clicking on the "Add New Category" button.
Frames
It will show the list of the Frames. Admin can add new frames, view, delete and active or deactive them.
Add New Frames To add new frame, click on "Add New Frame" button. A popup will appear where you can upload image (supports jpeg and png format), and enter tag .
Plans
Plans shows the list of created plans. Admin can create new plan, view transaction list, and deactivate the existing plans.
Create Plan - Admin can enter plan name, Plan pricing, Post per month, free trial period, description, select plan period (as Monthly or Yearly), post type (as Single or Multiple), allow for AI Text generation, AI Image Generation, and Editor Access.
Integrations
Integrations settings consist of Payment Settings and SMTP Settings.
Payment Settings - With Payment Settings, you can enter PayPal details or Stripe Details, razorpay details. You need to select any one the payment gatways and enter their detials to create a plan.
Note- If you change the payment gateway, the existing user data will not be retrieved since it is tied to recurring payments. As a result, the data will not be updated..
SMTP Settings - Admn can enter SMTP details for sending email.
Admin Profile
Here admin will get the option of profile Settings and the Admin Settings
Profile Settings - In this option, the admin can update their details, including profile image, contact information, name.
Admin Settings - In this option, the admin can customize their settings by adding their own logo and favicon, changing the dashboard colors, updating the title, and more.
User Dashboard
Dashboard
User dashboard settings contain the counts of Total Posts, Total Scheduled, Total Published, Facebook Post, Instagram Post, LinkedIn Post, and Pinterest Post.
Create Post
1. Enter the title, upload image/video and click on Generate Caption button. After that, click on Add Post to add more posts, for next step, click on Next Button or hit Save as Draft to save the current post in the Draft section.
2. On clicking Next button, you will be redirected to the Social Media Accounts page where you can connect the Facebook, Instagram, LinkedIn and Pinterest account and select the desired account. You can either schedule the post or can post at a time. You can see the scheduled post on Calendar.
It also indicates the platforms, the post is Compatible with. Like the post is compatible with Facebook and LinkedIN, as depicted in the image below.
3. When you click the Schedule button, you need to select the Date/Time and Timezone. After that hit the Schedule button.
4. You will be redirected to the Calendar where you can see the scheduled post.
Calendar
With this setting you can check the scheduled posts. You can view the failed posts, delete or view the posts.
Image Creator
It will show the list of the images and templates. You can also edit or delete the existing images or can create new image.
Create Image Click on Create Image button and enter the title, select the layout. On hitting the continue button you will be redirected to editor screen. User can customize the image using editing elements like Text, Filters, Images, Shapes, Drawing by Pencil.
Integrations
This setting will allow you to add social media account like Facebook, Instagram, LinkedIn, Pinterest, and YouTube.
Drafts
This setting show the list of the posts saved as a Draft. User can view, edit or delete the posts.
Plan
In this setting, users can view their purchased plans and also purchase new ones
Help And Support
In order to receive a technical support assistance, you need to have a valid purchase code. To get the code, please navigate to your Codecanyon "Downloads" page and click on the plugin download link.
After getting the Purchase code, please follow the steps mentioned on the link click Here to get your product verified. And then share your Purchase code and token ID with the support team.
If you have any questions that are beyond the reach of this help file, feel free to contact us. We will respond as soon as possible (within 24 – 48 hours, usually faster). We are open from 9:30am to 6:30pm (IST), from Monday till Friday.
NOTE: As authors of this script we do provide support only for the script-related features.
Outro
Thank you for your purchase. If you have any questions that are beyond the scope of this help file, please contact us through support@pixelnx.com
Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. No guarantees, but I'll do my best to assist. If you have a more general question relating to the script, you might consider visiting the forums and asking your question in the "Item Discussion" section.