> ## Documentation Index
> Fetch the complete documentation index at: https://docs.celebratemercy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Site Builder

> Step-by-step guide on using Builder.io for Salawat Challenge Site Management.

# 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](https://www.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`.

***

### Navigating the Dashboard

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

* [Builder.io Official Website](https://www.builder.io)
* CelebrateMercy internal documentation.
* [Builder.io Tutorial Video](https://www.loom.com/share/62e3295f2ddf4b708f181c86a99f35?sid=5b449211-fb24-4477-9970-3ba9c7465ea5)