Embed a Project in Salesforce with LWC

Business Background

This is useful when you want users to complete forms, update records, or work through a process while staying on the relevant Salesforce page. The logged-in Salesforce user’s session is used, so Salesforce permissions still apply. Users can only view, edit, or create the objects and records they are allowed to access in Salesforce.

Titan Solution

Titan lets you embed an external project in Salesforce using a Salesforce Lightning Web Component. This allows Salesforce and community users to access the project from the relevant Salesforce page.

A project embedded through Salesforce LWC can only be accessed from Salesforce. When users open the project via the LWC, their Salesforce permissions apply to supported actions and data access.

Collaborator usage may apply when users access the project through Salesforce LWC.

How to Video

• 00:00 An introduction on how to configure a Salesforce LWC in Titan Web.
• 0:11 Prerequisites for your project.
• 0:39 See how to configure an LWC in Titan Web.
• 3:20 Watch how to add a Titan LWC in Salesforce.

How to Guide

Prerequisites:

1. Create a Titan Web project with the elements that suit your business needs, for instance, charts that pull data from Salesforce, or Titan’s Salesforce forms that create (push) a new contact to Salesforce.

2. Configure Salesforce integration, for instance, Get Record Integrations or Push Record Integrations.

3. Create Static variables, for instance, account ID and user ID.

Configure Lightning Web Component in Titan Web

1. Click the Gear icon to open the Project Settings.
2. Select the User Access option, then use the toggle switch to turn on SF LWC.
3. Click the SF LWC Gear icon to open the configuration screen.

4. Click the Use Salesforce session checkbox to allow multiple users in your Salesforce.

Note:

You can have community or standard users in Salesforce with different profiles. Any Salesforce Push or Get will run on the logged-in user’s profile. For instance, if a community user creates a new contact in Salesforce, the contact will be created with that user’s profile details. If the logged-in user doesn’t have the permissions to create a new user, they will not be able to do so. It is suggested that you ensure users who have access to the Web project in Salesforce also have the necessary permissions to use all objects.

5. If necessary, click the Force JWT Session checkbox.
   • For more information about JWT, click here.

Note:

The JWT* enables the sharing of identity and security information across security domains. Salesforce validates the JWT using a previously configured certificate and additional parameters. Assuming that the JWT is valid and that the connected app has prior approval, Salesforce issues an access token. Titan authenticates on the server side between Salesforce Experience Cloud and Titan, and uses a JWT to run the user’s session.

* JSON Web Tokens

6. Add the custom audience to the field.
   • This is optional.
   • For Standard Users, the custom audience is http://login.salesforce.com/
   • For Community Users, use the community URL.
     • The easiest way to obtain this URL is to open Setup in Salesforce, search for Domains, and click Add Domain.

7. Use the drop-down list to select the Salesforce record ID to map to.
8. Use the drop-down list to select the Salesforce user ID to map to.
   • This user uses the Salesforce session, and you can map them to a variable on Titan Web.
   • The User ID comes from Salesforce. It lets you see who is running the Lightning Web Component in Salesforce.
9. Click the Apply button.
10. Save and Publish the project.
11. Copy the project link. You will need this when you add the Titan LWC object to Salesforce. Refer to this step.

Add Titan LWC in Salesforce

1. Open the object in Salesforce where you want to add the Titan Web project, for instance, an account.
2. Click the Gear icon in the top right corner of the page and select the Edit Page option.

Note:

If there is a warning message: “Select an insertion point for the component, either in an empty region or before or after another component,” click the OK button.

3. Search for the Titan component (1). The titanLWC component is listed (2).
4. Select the object where you want to add the new tab (3).
5. Click the Add Tab button (4). A new tab called Details is added.

6. Select the Details tab to open the Tab Label pop-up and scroll to the top of the drop-down list.
7. Choose the Custom option. This lets you add a custom name for the tab.

8. Type a custom name in the field, for instance, “Titan,” and click the Done button.

9. Make sure that the new tab is open. You will see the message: “Add Component here.”

10. Drag the titanLWC component to the tab.

11. Paste the Web project link in the titanURL field. Refer to this step.

12. Click the Save button in the top right corner of the screen.

13. Open the object (for instance, Account) in Salesforce. The new tab for the Web project is now visible and usable.