Creating a Code Resource for Cloud Pages in SFMC

Creating a Code Resource for Cloud Pages in Salesforce Marketing Cloud (SFMC) allows you to store and manage reusable code components, such as JavaScript, CSS, or HTML. Code Resources help maintain a clean and modular structure for your Cloud Pages.

Steps to Create a Code Resource in SFMC Cloud Pages:

Step 1: Navigate to Cloud Pages

Log in to Salesforce Marketing Cloud.
Go to the Content Builder tab.
Select Cloud Pages from the left navigation.

Step 2: Access the Code Resource Section

Inside Cloud Pages, click on the Code Resources tab.
Click on Create Code Resource.

Step 3: Configure Code Resource

Enter a Name
- Provide a meaningful name that describes the purpose of the resource.
- Example: custom-styles.css or api-helper.js.
Choose File Type
- SFMC supports CSS, JavaScript (JS), JSON, and other static files.
Upload or Write Code

You can either:

Upload a file from your computer.
Directly write the code inside the editor.

Step 4: Save and Publish the Code Resource

Click Save to store the code resource.
Click Publish to make it available for use.

How to Use Code Resources in Cloud Pages

Once a Code Resource is published, it can be referenced inside a Cloud Page.

Referencing a CSS File

To include a CSS file in your Cloud Page:

Referencing a JavaScript File

To include a JavaScript file:

Fetching a JSON File

If you have stored a JSON file, you can retrieve it using JavaScript:

fetch(‘https://cloud.example.com/code-resource/data.json’)

.then(response => response.json())

.then(data => console.log(data));

Benefits of Using Code Resources

Reusable Code – Store common JS, CSS, and JSON files for multiple pages.
Faster Load Times – Cloud Pages can load more efficiently with externally stored resources.
Improved Code Organization – Separating logic and styling keeps your Cloud Page cleaner.
Easier Maintenance – Update a single resource instead of modifying multiple pages.