Adding custom content to Affinity

Use content extensions to personalize Affinity with custom content. Custom content includes:

• Announcements
• Brand/Educational content
• Product offers
• Third-party app widgets
• Navigation
• Custom components

This guide explains how you can add custom content to Affinity, if you are on the Recharge Pro plan, or a Custom plan.

📘

Platform:

• Shopify Checkout Intergration
• Recharge Checkout on Shopify

---

Slot locations

Place custom content globally in the portal, or specific locations throughout the portal. See content extensions in the Recharge Help Center for information on the type of content that merchants can share through content extensions.

Use slots to display custom content in the following places on the customer portal for maximum impact:

• Header: Positioned at the top of the portal, these extensions are immediately visible upon page load, ideal for high-priority messages.
• Footer: Located at the bottom of the portal, footer extensions are suitable for essential, but less urgent, information.
• Sidebar: Situated between the navigation list and the logout link, sidebar extensions offer a balance of visibility and subtlety, great for additional navigation options or contextual information.

🚧

Note:

Extending the customer portal with custom content is only available to merchants on the Recharge Pro plan.

Places content in any of the following slots:

---

Create an extension with HTML content

Use script tags to declare extensions by specifying the target slow with the data-recharge-slot attribute. The following example outlines how to specify the target to add an announcement in the header slot of the next order page::

<script type="text/html" data-recharge-slot="overview.header">
<p>My announcement</p>
</script>

This method only supports HTML content. See advanced content extensions for information on creating functionally rich extensions.

---

Advanced content extensions

Only static content (HTML) is supported when declaring content extensions. This HTML is dynamically added to the Document Object Model (DOM) after the initial page render.

To create functionally rich extensions, Use slots to place initial placeholder elements. After adding these slots to the DOM, you can initialize custom JavaScript code to turn your slot content into a dynamic app. This approach ensures seamless integration and functionality of custom elements within the page.

The example below highlights how to initialize custom code in a slot.

Step 1: Slot preparation to add to the dom

<script type="text/html" data-recharge-slot="overview.header">
<div id="placeholder-for-my-app"></div>
</script>

Step 2: Javascript initialization

<script>
document.addEventListener("Recharge::slot::mounted", (event) => {
if (event.detail.name === "header" && event.detail.pathname === "/overview") {
// Initialize my app
}
});
</script>

Advanced content extensions are independent, but they are integrated within the larger system. They need to communicate efficiently with Affinity to stay updated and synchronous. Implement event-driven communication to handle this interactivity, making extensions responsive and up-to-date with the core application's state.