ChurnZero enables seamless integration with Salesforce, allowing you to share Account/Contact profile previews, Snapshot AI briefs, Account Insights Reports, Renewal Hub Reports, and Custom Dashboards directly to Salesforce.
Before You Begin
You’ll need an External Client App with the Canvas App enabled in Salesforce, which requires Admin access. This setup and authorization must be completed before you can share to Salesforce.
For more information: Set Up Your Salesforce External Client App
Create a Visualforce Page
- In Salesforce, go to Setup > Visualforce Pages.
- Click New.
- Enter a Label (for example, ChurnZero Reports).
- The Name field will auto-populate.
- Select Available for Lightning Experience if applicable.
- In the Visualforce Markup section, replace the default code with the following:
<apex:page>
<apex:canvasApp developerName="[nameofclientapp]"
width="100%" scrolling="yes" />
</apex:page>- Replace "[nameofclientapp]" with the Canvas App API Name.
- Click Save.
Add the Visualforce Page to a Page Layout
Contacts and Accounts
For accounts, you can share profile previews, Snapshot AI briefs, and account insight reports. For contacts, you can show profile previews.
The steps below walk through adding a new tab to an account or contact record page. You can add the Visualforce component to any section of an existing layout, including an existing tab or mid-layout, using the Lightning App Builder. Steps may vary slightly depending on your org's setup.
- In Salesforce, open any Account (or Contact) record.
- Click the gear icon in the top right and select Edit Page. This opens the Lightning App Builder for that record page.
- In the center panel, click the tab bar (for example, where Related, Details, and News appear) to select it.
- In the right-hand Page > Tabs menu, click Add Tab.
- Change the Tab Label to Custom and enter a name (for example, ChurnZero).
- Salesforce may also ask you to choose a tab style before you can continue.
- Click Done.
- Click the new tab to select it, then drag the Visualforce component from the left-hand Components list onto the tab (drop it where Add Component(s) Here is indicated). In the component properties on the right, configure:
- Label: Leave blank to default to the Visualforce page name, or enter a custom label.
- Visualforce Page Name: Select the Visualforce page you created.
- Height (in pixels): The default is 300, which adds a scrollbar. We recommend 800–1000px to start, and increasing if needed.
- Click Save, then Activate the page if prompted.
Other Page Layouts
Custom Dashboards and Renewal Hub Reports display on non-account/contact layouts. For these, add the Visualforce page as a standalone tab in the Salesforce navigation.
- In Salesforce, go to Setup.
- In the Quick Find box, search for Tabs (or navigate to User Interface > Tabs).
- Under Visualforce Tabs, click New.
- Configure the new tab:
- Visualforce Page: Select the Visualforce page you created.
- Tab Label: The name users will see (for example, ChurnZero Dashboards).
- Tab Name: Auto-populates from the Tab Label.
- Click Next, then set which user Profiles should have visibility into the tab.
- Click Next, then choose which Salesforce Apps should include the tab.
- Click Save.
The new non-account/contact tab will appear in the Salesforce navigation for the profiles and apps you selected. Users may need to add the tab to their navigation bar to make it visible in their view.
You can reuse the same Visualforce page across multiple layouts and tabs. The content displayed is determined automatically based on context of it being located on an account or contact record or not.
To display a single report on its own for an account or non-account report, create a separate Visualforce page and add it to the desired layout or tab. This allows ChurnZero users who have the Integrations permission to use the 'Set To This Report' button to pin a specific account/contact report or global report to that Visualforce page, ensuring all users are only seeing that one report in that one location or context. To return to viewing all reports, the ChurnZero admin user can clear this setting at any time.
Share Reports to Salesforce
- In ChurnZero, open the report or dashboard you want to share.
- Click Share.
- Select Salesforce.
- Toggle sharing On.
Reports appear in Salesforce based on where the Visualforce page is added.
If Your Org Has Cross-Origin Embedder Policy (COEP) Enabled
Some Salesforce orgs enable the Cross-Origin Embedder Policy (COEP) setting for added security. When COEP is enabled, ChurnZero content can't be displayed. This happens because of how Salesforce applies COEP to Visualforce pages, and it can’t be fixed by ChurnZero.
To check whether COEP is enabled, go to Setup > Session Settings > Visualforce Cross-Origin Security Headers and look for the Cross-Origin Embedder Policy (COEP) checkbox.
If COEP is enabled and you want to keep it on, you can display ChurnZero with a Lightning component instead of a Visualforce page. The same component can be used in two places:
- Account and Contact record pages: profile previews and Snapshot AI briefs, plus Account Insights Reports on accounts
- A standalone Lightning page: Renewal Hub Reports and Custom Dashboards
Important: Report pinning is not available with this method. The “Set To This Report” button only works on Visualforce pages. With the Lightning component, users see all reports shared to Salesforce for that location and can switch between them, but you can’t lock the component to a single report. If you need one specific report displayed on its own, use the Visualforce method with COEP disabled.
Before You Begin
You’ll need Salesforce Admin permissions and access to the Salesforce Developer Console. Your External Client App must already be set up with the Canvas App enabled. For more information: Set Up Your Salesforce External Client App
Step 1: Enable the Lightning Component Location
- In Salesforce, go to Setup > External Client App Manager.
- Open your ChurnZero External Client App and click Edit Settings.
- In the Canvas App Settings section, under Locations, add Lightning Component. Leave any existing locations in place.
- Click Save.
- Copy the Canvas App API Name. You’ll need it in Step 3.
Step 2: Create the Component and Controller
- Click the gear icon in the top right and select Developer Console.
- In the Developer Console, go to File > New > Lightning Component.
- Enter a Name (for example, ChurnZeroCanvas). Under Component Configuration, select Lightning Page and Lightning Record Page, then click Submit.
- In the panel on the right side of the editor, click Controller. A new controller file opens.
- Replace the contents of the controller file with the following, then save:
({
doInit : function(component) {
component.set("v.canvasParams",
JSON.stringify({ recordId: component.get("v.recordId") }));
}
})Step 3: Update the Component
- Switch to the component tab (the file ending in .cmp).
- Replace its contents with the following. Replace [nameofclientapp] with your Canvas App API Name, then save:
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId">
<aura:attribute name="canvasParams" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:if isTrue="{!not(empty(v.canvasParams))}">
<force:canvasApp developerName="[nameofclientapp]"
parameters="{!v.canvasParams}"
width="100%" height="900px" />
</aura:if>
</aura:component>Tip: Save the controller before the component. Saving the component first may return an error that the controller doesn’t exist yet.
The component detects where it’s placed. On an Account or Contact record page, it shows content for that record. On a standalone page, it shows Renewal Hub Reports and Custom Dashboards.
Step 4: Add the Component to Account and Contact Pages
- Open any Account (or Contact) record.
- Click the gear icon in the top right and select Edit Page.
- In the Components list on the left, scroll to the Custom section and find the component you created (for example, ChurnZeroCanvas).
- Drag it onto the page or tab where you want ChurnZero to appear. If a ChurnZero Visualforce component is already on the page, you can remove it.
- Click Save, then Activate the page if prompted.
Repeat these steps for the Contact record page if you want ChurnZero to appear there as well.
Step 5: Add a Standalone Page for Renewal Hub and Custom Dashboards
Renewal Hub Reports and Custom Dashboards display on pages that aren’t tied to a record. Instead of a Visualforce tab, create a Lightning App Page:
- In Salesforce, go to Setup. In the Quick Find box, search for Lightning App Builder and click New.
- Select App Page and click Next.
- Enter a Label (for example, ChurnZero Dashboards) and click Next.
- Select the One Region layout and click Finish.
- In the Components list, scroll to the Custom section and drag your component (for example, ChurnZeroCanvas) onto the page.
- Click Save, then Activate.
- On the activation screen, choose which Lightning apps should include the page and where it appears in the navigation, then click Save.
The new page appears in the navigation for the apps you selected. Users may need to add it to their navigation bar to see it.
Step 6: Test
- Open an Account record and refresh the page. The component should display the Profile, Reports, and Snapshot AI tabs for that account, and shared Account Insights Reports are available from the Reports tab.
- Open a Contact record and refresh the page. The component should display the ChurnZero profile preview for that contact.
- Open the standalone page from the navigation bar. The component should display your shared Renewal Hub Reports and Custom Dashboards.
Limitations
- Report pinning: “Set To This Report” is not available. Each component shows every report shared to Salesforce for its location.
- Single-report placements: Because reports can’t be pinned, you can’t dedicate a component to one report, or show two different reports side by side on the same page.
Troubleshooting: Reports Not Appearing
If reports are not appearing in Salesforce, check the following:
- The Salesforce integration is authorized
- The Canvas App is enabled
- The Visualforce page includes the correct Canvas App API Name
- The Visualforce page is added to a page layout
- The report is shared to Salesforce
- You have appropriate access permissions
If the issue persists, contact ChurnZero Support.
Comments
0 comments
Article is closed for comments.