# 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** | **Propensity-to-buy (PTB) score** insights for the customer from AWS, Azure, or GCP, at account or opportunity level. _(Available on Account and Opportunity pages.)_ | :::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. ::: --- ## 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. **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.