# Page Components Suger ships a set of **Lightning components** you can drop onto record, app, and home pages with the **Lightning App Builder** — no code required. They surface Suger's co-sell and marketplace functionality directly inside your Salesforce record pages. These are separate from [Quick Actions](/salesforce-app/salesforce-app-quick-actions) (the action buttons in the highlights panel) — the components below are full **panels and cards** you place in the body of a page. --- ## Overview There are two kinds of things you can add to a Salesforce record page, and they appear in different places: | What | Where it appears | What it does | | ---- | ---------------- | ------------ | | **Page components** (widgets and cards) | The body of the record page, below the highlights panel | Show Suger offers, referrals, entitlements, and insights linked to the record, and let users act from there | | **[Quick Actions](/salesforce-app/salesforce-app-quick-actions)** (action buttons) | The highlights panel at the very top of the record page | One-click buttons like _New Offer via Suger_ and _Co-Sell via Suger_ that open a focused flow immediately | You can add one or both. Most teams add both — the widget for visibility and the buttons for quick access. This page covers the **page components**; see [Quick Actions](/salesforce-app/salesforce-app-quick-actions) for the buttons. ### Prerequisites - The Suger App must be installed and connected to Salesforce. See the [Salesforce integration setup guide](/integrations/salesforce). - Your team must have Suger permission sets assigned. See [Permission Sets](/salesforce-app/salesforce-app-permission-sets). Permission sets control which components and buttons each person actually sees — adding a component to the page without assigning permission sets means those users will see nothing. - You need **Salesforce Administrator access** to edit page layouts and record pages. --- ## How to add a component 1. Open the record (or app/home) page you want to edit and choose **Setup (⚙️) → Edit Page** to open the Lightning App Builder. 2. In the **Components** list on the left, scroll to the **Custom** (managed) section and find the Suger component by name (e.g. _Suger Opportunity Quick Panel_). 3. Drag it onto the page where you want it to appear. 4. **Save**, then **Activate** the page (as org default, or by app/profile, as needed). :::note Each component only appears in the App Builder on the page types it supports, and some are **locked to specific objects** (noted below) — they won't show up when you're editing another object's page. ::: :::tip **Don't forget to click Activate.** Saving the page in the Lightning App Builder does not publish it to users — you must also activate it. You can activate as **Org Default** for everyone, or by app or profile for more control. ::: --- ## Opportunity components These surface Suger on the **Opportunity** record page — the main workspace for a sales rep. | Component | What it does | | --------- | ------------ | | **Suger Opportunity Quick Panel** | The primary, all-in-one Suger widget — surfaces co-sell **and** marketplace together in a single panel. The Marketplace tab lists the opportunity's offers, entitlements, and private Azure plans, and the **New Offer** menu includes **Private Plan** to create a private plan pre-linked to the opportunity. Use this when you want one component that does everything. | | **Suger Cosell Actions Quick Panel** | The co-sell **actions** — share the opportunity as a referral with AWS, Azure, or GCP and run co-sell operations. _(Locked to Opportunity.)_ | | **Suger Cosell Referrals Quick Panel** | The co-sell **list** — the referrals created from or linked to this opportunity. _(Locked to Opportunity.)_ | | **Suger Marketplace Actions Quick Panel** | The marketplace **actions** — create private offers and related operations. _(Locked to Opportunity.)_ | | **Suger Marketplace Offers Quick Panel** | The marketplace **list** — the offers linked to this opportunity. _(Locked to Opportunity.)_ | | **Suger Private Plans Quick Panel** | The private **Azure plans** linked to this opportunity — each row shows the Plan, Create Date, and Status (a just-submitted plan shows **Creating** until the Azure publish finishes). Clicking a plan opens the Suger Product detail page with that plan highlighted, and **Add Plan** creates a new private plan pre-linked to the opportunity. _(Locked to Opportunity.)_ | | **Suger Account Insights** | The customer's full picture — an **engagement-score** line on both page types, plus a **Marketplace / Co-Sell / Funding / Contacts** widget when placed on an Account page. _(Available on Account and Opportunity pages — see [Suger Account Insights](#suger-account-insights) below.)_ | :::tip The Quick Panels come as an **Actions + List** pair for each area (Co-Sell and Marketplace), so you can place them independently — for example, the actions panel near the top of the page and the list further down. Prefer the **Suger Opportunity Quick Panel** if you'd rather have a single combined widget instead. ::: --- ## Suger Account Insights **Suger Account Insights** is the one component that works on both **Account** and **Opportunity** pages, and it renders differently on each. On an Opportunity page it is a compact insight line; on an Account page it is a full widget covering the customer's marketplace activity, co-sell referrals, funding requests, and the partner contacts who cover them. ### On both Account and Opportunity pages The component opens with an **engagement-score** line for the customer, drawn from the cloud partner's own view of the account (AWS, Azure, or GCP). ### On Account pages only Below the score, an Account page adds a tab switcher. Marketplace is always there; the rest appear when your org has the feature configured and the user has access to it: | Tab | What it shows | When it appears | | --- | ------------- | --------------- | | **Marketplace** | **Active Offers** — the account's live offers — followed by **Active Entitlements**, the contracts currently running for this account. | Always. | | **Co-Sell** | **Referrals** across the account's opportunities, plus any linked to the account directly. Read-only — referrals are created from the Opportunity page, which carries the context they need. | Co-sell is configured for your org and the user can read referrals for at least one cloud. | | **Funding** | **Funding Requests** — AWS funding reached two ways: linked to one of the account's opportunities, or found through the account's AWS co-sell referrals. Funding attaches to an AWS co-sell opportunity, never to the account itself, so a referral linked straight to the account still surfaces its funding even with no Salesforce opportunity involved. Read-only. | The user has funding read or write access. | | **Contacts** | **Associated Contacts** — the partner contacts linked to this account. | Co-sell is configured for your org and the user can read at least one of AWS, Azure, or GCP. | :::note The Funding tab scans a recent page of referrals rather than every one, so on an account with a lot of co-sell history the list can be partial. When that limit is reached the tab says so above the rows. ::: **Finding an offer.** Once there is at least one active offer, a **search box** appears above the list. It filters the offers already loaded in the widget by **offer name**, **offer ID**, **buyer account ID**, or **product name** — it does not re-query the server, so results come back as you type. **Board vs. List.** A **Board / List** toggle switches between the card view and the row view. The toggle is a property of the whole widget, so flipping it changes **both** Active Offers and Active Entitlements at once. On a narrow layout there is no room for the list's columns, so the toggle is hidden and Board view is used. Rows carry the identifiers you need to reconcile a record against the marketplace: | Row field | Appears on | What it is | | --------- | ---------- | ---------- | | **Partner ID** | Offers and entitlements | The seller marketplace integration account that owns the offer or entitlement — for AWS, the 12-digit seller AWS account ID. | | **Buyer Account ID** | Entitlements | The buyer's account on the cloud side. | | **Contract Term** | Offers | The term the offer runs for, normalized from however that cloud states it. | | **Reseller ID** | Offers, CPPO only | The reseller on a channel deal — shown only when the offer is a [reseller authorization / CPPO](/salesforce-app/salesforce-app-cppo/), inbound or outbound. | Offer rows also carry the offer's external ID, product name, create and expire dates, whether it is a renewal, and — once accepted — the acceptance date. Entitlement rows carry the external ID, product name, status, type, and start and end dates. Identifier values can be copied straight from the row. :::note **The tab switcher only renders on an Account page.** On an **Opportunity** page there is no switcher at all — just the engagement-score line. The switcher is also dropped when Marketplace is the only tab you qualify for — in a marketplace-only org, for example. With nothing to switch to, the Marketplace content simply renders on its own rather than behind a one-button switcher. Inside the Contacts tab, **Associated Contacts** needs the Account to have a **Website** — Suger matches partner contacts to an account by its company domain. An account with an empty Website field has nothing to match on, so the section shows its **"No associated contacts to display"** empty state. Fill in the Website and reload the page. ::: --- ## Object detail cards Read-only **detail views** of a Suger record, shown on that object's record page. They already ship on Suger's packaged record pages; add them here only if you're building a custom page for one of these objects. To add one, follow the same steps as adding a widget — open the object's record page in the Lightning App Builder, find the card in the **Custom** components section, and drag it onto the canvas. | Component | Record page | | --------- | ----------- | | **Suger Buyer Detail Card** | Buyer | | **Suger Entitlement Detail Card** | Entitlement | | **Suger Offer Detail Card** | Offer | | **Suger Product Detail Card** | Product | | **Suger Referral Detail Card** | Referral | --- ## Troubleshooting | Issue | Possible cause | Resolution | | ----- | -------------- | ---------- | | Suger component is not visible in the **Components** panel | The Suger package isn't installed, or the page type doesn't support the component | Confirm the Suger App is installed. Suger components only appear on supported page types — opportunity-specific components won't show when editing Account or Contact pages. | | Component is on the page but shows a **"Feature Disabled"** message | The feature has been disabled in Suger App Settings | In the Suger App in Salesforce, go to **Settings → Tabs Control** and turn off the toggle for the relevant feature. | | Buttons appear on the page but users can't see them | The user doesn't have the correct Suger permission set assigned | In **Setup → Permission Sets**, assign the appropriate [Suger permission set](/salesforce-app/salesforce-app-permission-sets). | | Page changes aren't showing for users after saving | The page was saved but not activated | Return to the Lightning App Builder and click **Activate**. | --- ## Frequently asked questions **Do I need to add the widget and the quick action buttons, or just one?** You can add either or both — they serve different purposes. The widget shows a full view of offers and referrals linked to the record. The [quick action buttons](/salesforce-app/salesforce-app-quick-actions) give reps a shortcut to create something new without scrolling to the widget first. Most teams use both. **Can I add the Suger widget to Account or Contact pages too?** The opportunity-specific panels (like **Suger Opportunity Quick Panel**) are locked to the Opportunity object and won't appear on other page types. The **Suger Account Insights** component is available on both Account and Opportunity pages — and the Account page gets the fuller version: not just the engagement score, but the **Marketplace / Co-Sell / Funding / Contacts** switcher, showing only the tabs your org has configured and the user has access to. See [Suger Account Insights](#suger-account-insights). There is no Suger component for the Contact object. **I added Suger Account Insights to my Account page, but a tab is missing.** Each optional tab has its own requirement. **Co-Sell** and **Contacts** both need a co-sell integration plus read access to at least one of AWS, Azure, or GCP — Co-Sell specifically needs referral read, so marketplace-only access is not enough. **Funding** needs funding read or write access. In a marketplace-only org there is nothing to switch to, so the tab switcher is dropped entirely and the Marketplace content renders on its own. If the Contacts tab is there but **Associated Contacts** is empty, check that the Account record has a **Website** — Suger matches partner contacts by the account's company domain. See [Suger Account Insights](#suger-account-insights). **Can different teams see different widgets on the same opportunity page?** Yes — you can activate different page layouts by app or profile in the Lightning App Builder. For example, your marketplace team can have a page showing the offers widget, while your co-sell team sees the referrals widget. **When would I need to add an object detail card manually?** Only when you're building a custom record page for a Suger object like Offer or Referral. If you're using Suger's default packaged record pages, the detail cards are already included and don't need to be added manually. --- ## Related - [Quick Actions](/salesforce-app/salesforce-app-quick-actions) — the Suger action buttons (Co-Sell, Create Offer, etc.) for the highlights panel. - [Permission Sets](/salesforce-app/salesforce-app-permission-sets) — control which users see Suger tabs, components, and actions.