---
updatedAt: 2025-11-13T22:50:49.000Z
agentTools:
  projectIndex: https://documentation.indigitall.com/llms.txt
---

# Salesforce Service Cloud

Salesforce lets you quickly integrate external apps using [Canvas](https://developer.salesforce.com/docs/atlas.en-us.platform_connect.meta/platform_connect/canvas_framework_intro.htm). This integration mechanism allows you to embed an existing web application within the Salesforce console, providing access to users from one place.

Multiple apps can be integrated into the Salesforce console through Canvas at the same time.

This guide aims to explain the basic steps to integrate a public web application without going into specific details, such as event management or Salesforce context, which has its own well-developed sections in the official documentation referred to.

Once the app is accessible from a browser, you can continue with the setup from within Salesforce. The easiest way to test is to use [AWS App Runner](https://aws.amazon.com/apprunner/).

## Create canvas app in the Salesforce console

### Salesforce Requirements

This integration works with any edition of [Salesforce](https://help.salesforce.com/s/articleView?id=sf.connected_app_create_canvas.htm\&type=5).

### Account Creation

The first thing is to have a Salesforce account. It is possible to create one for development from [here](https://developer.salesforce.com/signup).

When completing the data, you will receive an email verification and the environment will be ready.

<Image alt="Salesforce Account" align="center" width="600px" src="https://files.readme.io/f8bcdad-Salesforce_Account.png" />

### Add Canvas App

When entering Salesforce, we are presented with the main page of the console:

<Image alt="Add Canvas App" align="center" width="600px" src="https://files.readme.io/f48b0a2-Add_Canvas_App.png" />

We will not delve into the elements, but as a basis indicate that:

* At the top we have the navigation bar that allows you to switch between apps (dots icon on the left) or select one of the sections.
* On the left side a context menu may appear, depending on the app in which we are. For example, the sales app "Sales console" does not present this part.

The upper right corner presents the access to our profile and the "Setup" console that we will use to add the app through Canvas:

<Image alt="Setup" align="center" width="600px" src="https://files.readme.io/d2d6d2c-setup.png" />

First, let's determine in which app we want to add the Canvas element to present the external application. In our case, we are going to use the "Sales console".

<Image alt="Sales Console" align="center" width="600px" src="https://files.readme.io/2796aba-Sales_Console.png" />

Once inside the "Sales console" application, we go to the top right, and access the configuration through the "Setup" option, which is inside the gear-shaped icon.

<Image alt="Service Setup" align="center" width="600px" src="https://files.readme.io/e132f7f-Service_Setup.png" />

Within the "Setup" page we will see a context menu on the left. Within the menu, we must locate the *Apps > App Manager*.

<Image alt="App Manager" align="center" width="350px" src="https://files.readme.io/aa2d1c0-App_Manager.png" />

In the App Manager settings we will see the list of available applications and, in the upper right, the option to add new apps. In our case we are going to use the "New connected App" option.

<Image alt="Experience App Manager" align="center" width="600px" src="https://files.readme.io/3bbd1c9-Experience_App_Manager.png" />

In the application registration form we must complete at least:

* Basic information
  * Connected App Name
  * API Name (auto generates one in relation to the one provided in the previous field)
  * Contact Email
* API (Enable OAuth Settings)
  * Enable OAuth Settings should be checked
  * Callback URL: one or more URLs where our app is available (*domain.wacc.indigitall.com*)
  * Selected OAuth Scopes: select **Full access**
  * Require Secret for Web Server Flow (checked by default)
  * Require Secret for Refresh Token Flow (checked by default)

<Image alt="New Connected App" align="center" width="600px" src="https://files.readme.io/63ce9143409dec45283b718574303f94f090233f1a4fce668e5bee73aa99c12c-image_96.png" />

In the **Canvas** section, at the end of the form, we must:

* Enable the Canvas option
* Fill in the data:
  * Canvas App URL: with the URL that receives the POST request to authenticate the Salesforce call:\
    *https\://\{\{cloud}}.wacc.indigitall.com*
  * Access Method: in this section we can use **OAuth Web Flow (Get)** for implicit authorization or maintain **Signed Request (POST)** for more security. Using Signed Request requires developing a URL within the target application that verifies the request
  * Locations: add Lightning Component

<Image alt="Canvas App Settings" align="center" width="600px" src="https://files.readme.io/648abbbd66b38e413afdd138cd0a525493a616804f5a11753665cdc896a2dd41-image_97.png" />

**Enable app usage**

Now we return to the list of applications in the "Setup" section, side menu *Apps > App Manager*.

<Image alt="App Manager Setup" align="center" src="https://files.readme.io/5e52740-App_Manager_Setup.png" />

In the list we must locate our new app and use the drop-down on the right to access the "Manage" option.

<Image alt="New Canvas App" align="center" width="600px" src="https://files.readme.io/a3e3ca1-New_Canvas_App.png" />

Select in "Permitted Users" the option **Admin approved users are pre-authorized** in the "OAuth Policies" section and save the changes.

### Assign permissions in Salesforce

**Activate app for corresponding profiles**

From *ADMINISTRATION > USERS > PROFILES*, select the profile to which the users who must access the app through Canvas belong and mark the app to which we want to give access in the **Connected Apps Access** section.

<Image alt="Connected Apps Access" align="center" width="600px" src="https://files.readme.io/dc4ee78-Connected_Apps_Access.png" />

This step can be performed per user, but it is more useful to assign the profile or profiles that will use the app the use so that any new or existing user belonging to that profile has access.

## Create Lightning Web Component

We need to add a Lightning Web Component that uses the Canvas component to render our app. To do this, from the configuration option of the upper right bar select the option "Developer console".

<Image alt="Developer Console" align="center" width="600px" src="https://files.readme.io/daebbe3-Developer_Console.png" />

A modal like the following will open:

<Image alt="Modal" align="center" width="600px" src="https://files.readme.io/9c05f91-modal.png" />

From here, we can use the menu option *File > New > Lightning Web Component* to create the component, assign a name and description and if necessary a bundle.

<Image alt="Lightning Web Component" align="center" width="600px" src="https://files.readme.io/6086a87-Lightning_Web_Component.png" />

To register our web application as a source of the Canvas component we need the **API Name** parameter that was generated (or assigned) when creating the Connected App. This identifier is assigned in the "developerName" property of the Canvas component:

```javascript
<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" access="global">  
    <force:canvasApp width="100%" maxWidth="infinite" maxHeight="infinite"
                        developerName="REEMPLAZAR POR API NAME"/>
</aura:component>
```

Once the component is saved, we can add it to our own page. To add a new page we access the "Service Setup" option in the upper right menu.

<Image alt="API Name / Service Setup" align="center" width="600px" src="https://files.readme.io/14e68c0-API_Name.png" />

Then, we select the *User Interface > Lightning App Builder* option from the left side menu.

<Image alt="User Interface" align="center" width="300px" src="https://files.readme.io/bd01fb6-User_Interface.png" />

A list of all applications already created will be displayed. Click "New" at the top of the list.

<Image alt="App Builder" align="center" width="600px" src="https://files.readme.io/9f6bcff-App_Builder.png" />

In the modal that appears, select "App Page" and press "Next".

<Image alt="App Page" align="center" width="600px" src="https://files.readme.io/b3c68c3-App_Page.png" />

We choose the distribution of the created page, in our case "One region", and press "Next".

<Image alt="Create Page" align="center" width="600px" src="https://files.readme.io/1a5cf8f-Create_Page.png" />

Once the initial configuration is completed, we will be shown the design console for the new page. In the central part we can see our page, with a button to add components "Add Component Here". Click the button to add a new one.

<Image alt="Add Component" align="center" width="600px" src="https://files.readme.io/b08b17f-Add_Component.png" />

Clicking adds a zone for components. Now we can click on our App, which should appear in the left area, within the "Custom" section. When you click on the app you want, it will be displayed in the central area.

<Image alt="Custom section" align="center" width="600px" src="https://files.readme.io/151c93a-Custom.png" />

Now by clicking "Save" in the upper right we will be asked if we want to activate the page. Click "Activate".

<Image alt="Activate" align="center" width="600px" src="https://files.readme.io/4c9e72d-Activate.png" />

Another modal will be displayed with the information related to the page that we are going to publish. In the section "Page Settings" we can modify the name, icon and decide which users to show the page. Check "Activate for all users".

<Image alt="Activation Test" align="center" width="600px" src="https://files.readme.io/5e3f01e-Activation_Test.png" />

From the "Lightning Experience" tab we can select in which area of Salesforce the page will be displayed. In our case, for this example, select "Sales Console" and click "Add page to app" in the right area.

<Image alt="Lightning Experience" align="center" width="600px" src="https://files.readme.io/523f6c0-Lightning_Experience.png" />

We will see our page among the menu items, being able to modify their position. Now press "Save".

<Image alt="Test" align="center" width="600px" src="https://files.readme.io/7475531-Test.png" />

Now, if we go to the "Sales Console" app we can see in the menu (or in the drop-down) the new item.

<Image alt="Reports" align="center" width="600px" src="https://files.readme.io/e95c9cc-New_item.png" />