Skip to main content

​
Standard Operating Procedure (SOP) for Managing and Editing the Global Salawat Challenge Website using Builder.io

​
Overview

This document provides a detailed guide for managing, editing, and customizing the Global Salawat Challenge website using Builder.io. It includes instructions for editing pages, managing components, scheduling content, and adding users.

​
Scope

This SOP is intended for team members responsible for maintaining the Global Salawat Challenge website through Builder.io.

​
Responsibilities

  • Website Administrators: Ensure timely updates and maintenance of the website.
  • Marketing Teams: Use Builder.io to adjust content and aesthetics based on seasonal campaigns and branding requirements.
  • Developers: Troubleshoot issues and optimize components as needed.

​
Requirements

  • Access to Builder.io with credentials:
    • developer.salawat.com
    • salawat.salawat.com
  • Internet access.
  • Basic knowledge of website editing and Builder.io’s user interface.

​
Process

​
Accessing Builder.io

  1. Open a web browser and go to Builder.io.
  2. Click Go to App in the top-right corner.
  3. Log in using Continue with Google and select either:
    • developer.salawat.com
    • salawat.salawat.com.
  1. After logging in, the Builder.io homepage displays key statistics:
    • Page changes.
    • Popular and most visited pages.
    • Engagement statistics (e.g., site loads).
  2. Use this dashboard to review the site’s performance.

​
Managing Pages (Content Section)

  1. Click the Content tab on the left sidebar.
  2. Browse the list of pages (referred to as “content” in Builder.io). Examples:
    • Global Rankings
    • Organizations
  3. Select a page to begin editing. For example:
    • Click Global Rankings to open the page editor.

​
Editing Page Components

  1. On the page editor, adjust the URL Path:
    • Example: Change salawat.celebratemercy.com/GlobalRankings to a preferred endpoint.
  2. Modify page components from the left-side panel:
    • Change text (titles, descriptions, button labels).
    • Adjust colors (backgrounds, text, button colors).
    • Replace images (logos, headers, icons).
    • Update links (URLs associated with buttons or text).
  3. For advanced edits:
    • Select a component.
    • Use the Options tab on the right to view and modify specific properties (e.g., background, layering, alignment).

​
Editing Additional Pages

  1. Navigate to another page, such as Organizations, from the content section.
  2. Repeat the component editing process for each page:
    • Review and adjust layers visible under the Layers tab.
    • Edit properties under the Options tab.

​
Scheduling Content

  1. For seasonal updates:
    • Use the Schedule Content feature to define when specific components or pages appear or disappear.
    • Set specific dates or durations for content visibility.
  2. Review and test scheduled changes to ensure accuracy.

​
Publishing Changes

  1. After making updates, click the Publish button to push the changes live.
  2. Confirm that all updates are visible and functioning correctly on the live site.

​
Account and User Management

  1. Navigate to the Settings tab on the sidebar.
  2. Click Users to manage access:
    • Add new users by inputting their email addresses.
    • Assign permissions based on their roles (e.g., marketers, developers).
    • Remove or edit users as necessary.

​
Upgrading to Paid Tier

  1. To unlock advanced features (e.g., insights, user engagement analytics):
    • Upgrade the account from the Settings tab.
  2. Benefits include:
    • Conversion tracking.
    • Clickstream data.
    • Detailed analytics for better marketing strategies.

​
References