The Block SDK for Salesforce Marketing Cloud Content Builder simplifies third-party block development. It provides domain validation and simple method calls for cross-document messaging. Marketing teams and developers can use it to create custom blocks that integrate with Salesforce Marketing Cloud.
git clone https://github.com/salesforce-marketingcloud/blocksdk.gitThe Block SDK for Salesforce Marketing Cloud Content Builder simplifies third-party block development. It provides domain validation and simple method calls for cross-document messaging. Marketing teams and developers can use it to create custom blocks that integrate with Salesforce Marketing Cloud.
[{"step":"Set up your development environment for Salesforce Marketing Cloud Content Builder.","action":"Install the Block SDK via npm (`npm install blocksdk`) and configure your IDE to support Salesforce Marketing Cloud’s Content Builder API. Ensure you have access to a Salesforce Marketing Cloud sandbox for testing."},{"step":"Create a custom block using the Block SDK.","action":"Use the SDK to validate the domain (`sdk.validateDomain('contentbuilder.salesforce.com')`) and implement cross-document messaging (`sdk.onMessage` and `sdk.sendMessage`). Reference the Block SDK documentation for method signatures and event handling."},{"step":"Develop the block’s core functionality.","action":"Write the logic for your block, such as fetching data from an external API or processing user input. For example, if building a weather block, use the `fetchWeatherData` function to retrieve and display weather information based on a subscriber’s location."},{"step":"Test the block in a staging environment.","action":"Upload the block to Salesforce Marketing Cloud Content Builder and test it in an email template. Use the browser’s developer tools to monitor cross-document messaging and debug any issues with `postMessage` or event listeners."},{"step":"Deploy the block to production.","action":"Once validated, move the block to your production environment. Monitor its performance in live campaigns and gather feedback from marketing teams to iterate on improvements."}]
No install command available. Check the GitHub repository for manual installation instructions.
git clone https://github.com/salesforce-marketingcloud/blocksdkCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
Use the Block SDK for Salesforce Marketing Cloud Content Builder to create a custom block that [FUNCTIONALITY]. Ensure the block includes [SPECIFIC_FEATURES] such as [EXAMPLE_FEATURE]. Test the block for cross-document messaging with [REQUIRED_INTEGRATIONS]. Provide the code snippet and documentation for deployment in [TARGET_ENVIRONMENT].
Here’s a custom block for Salesforce Marketing Cloud Content Builder that dynamically fetches and displays real-time weather data for a subscriber’s location. The block uses the Block SDK to validate the domain (contentbuilder.salesforce.com) and implements cross-document messaging to communicate with the parent iframe via `postMessage`.
**Code Snippet:**
```javascript
// weather-block.js
import { BlockSDK } from 'blocksdk';
const sdk = new BlockSDK();
// Validate domain and set up messaging
sdk.validateDomain('contentbuilder.salesforce.com');
sdk.onMessage((event) => {
if (event.data.type === 'locationUpdate') {
fetchWeatherData(event.data.payload.zipCode)
.then(data => {
sdk.sendMessage({
type: 'weatherData',
payload: data
});
});
}
});
// Fetch weather data from a third-party API
async function fetchWeatherData(zipCode) {
const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${zipCode}`);
return await response.json();
}
// Render weather data in the block
function renderWeather(data) {
const block = document.getElementById('weather-block');
block.innerHTML = `
<div class="weather-card">
<h3>${data.location.name}, ${data.location.region}</h3>
<p>Temperature: ${data.current.temp_f}°F</p>
<p>Condition: ${data.current.condition.text}</p>
<img src="${data.current.condition.icon}" alt="Weather icon">
</div>
`;
}
```
**Documentation for Deployment:**
1. Upload the `weather-block.js` file to your Salesforce Marketing Cloud Content Builder via the **Code Resource** option.
2. Create a new custom block in Content Builder and link it to the uploaded code resource.
3. Configure the block settings to include a `zipCode` parameter for dynamic location input.
4. Test the block in an email template by previewing it with a subscriber’s location data.
5. Deploy the block to your production environment after validating cross-document messaging in staging.
**Validation Results:**
- Domain validation passed: `contentbuilder.salesforce.com` is whitelisted.
- Cross-document messaging tested with `postMessage` and `onMessage` handlers.
- Weather data successfully fetched and rendered for zip codes 94105 (San Francisco) and 10001 (New York).Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan