Build apps with the HubSpot connector for Lovable

Please note: the information in this article is confidential and intended for participants in the HubSpot connector for Lovable private beta only. Please do not publicly share any information outlined here.

Use the HubSpot connector for Lovable to build custom apps and user interfaces with HubSpot data. After an admin configures access, users can connect HubSpot to Lovable, describe an app using natural language, and share the app with other users.

Each user’s HubSpot data access is based on their existing HubSpot user permissions. When a user builds or accesses a Lovable app, they can only access HubSpot data that they have permission to access in HubSpot. Admins control who can build Lovable apps and who can access the HubSpot connector for Lovable.

Before you get started

Before users can build apps in Lovable using HubSpot data, review the following:

• Super Admins: grant users the HubSpot connector for Lovable permission in HubSpot, and approve which users can install the connector and Lovable-built apps.
• Lovable admins: turn on the HubSpot connector in the Lovable workspace.
• Users who build apps: connect with their HubSpot account to Lovable, build the app, and share it with other users.
• Users who access apps: access Lovable-built apps, but they don’t build the apps themselves.
• HubSpot data is scoped to the individual user. Building or accessing an app does not give a user access to HubSpot data beyond their existing HubSpot permissions.
• When connecting HubSpot to Lovable, it's recommend that you select all available optional permissions. The optional permissions you select set the maximum HubSpot permissions available to apps you build with the connector. Selecting only some optional permissions can limit the apps and functionality you can build in Lovable.

Set up access for users (Admin required)

Complete the following steps before users can start using the HubSpot connector for Lovable.

1. Grant users permission to build apps in Lovable

A Super Admin must first grant the HubSpot connector for Lovable permission to users who will build Lovable apps.

1. In your HubSpot account, click the settings icon in the top navigation bar.
2. In the left sidebar menu, navigate to Users & Teams.
3. In the user table, click a user record, then click the Access tab.
4. Under Permissions, click Edit permissions.
5. Click to expand the Choose permissions section.
6. Click AI features.
7. Toggle the HubSpot connector for Lovable switch on.
8. In the top right, click Save.

After granting the permission, approve the users who can install the connector.

2. Approve users to install the HubSpot connector for Lovable

A Super Admin must approve access for users to install the HubSpot connector for Lovable.

1. In your HubSpot account, click the settings icon in the top navigation bar.
2. In the left sidebar menu, navigate to Integrations > Connected Apps.
3. Click the Approved apps tab.
4. Click Approve apps.

5. Search for and select the HubSpot connector for Lovable.
6. In the Manage access banner, click Approve. 

7. In the dialog box, select who can install the app and review the permissions, data, and APIs the connector can access.
8. Click Approve app.

Learn more about approving access to apps for your team.

3. Turn on optional permissions for the HubSpot connector for Lovable

Super Admins control which optional permissions are available in the HubSpot connector for Lovable, setting the permission ceiling for all app builders. Even if an optional permission is turned on, an app builder only has access if their own HubSpot permissions allow it.

1. In your HubSpot account, click the settings icon in the top navigation bar.
2. In the left sidebar menu, navigate to Integrations > Connected Apps.
3. Click the Approved apps tab.
4. For the HubSpot connector for Lovable, click Manage Access on the right.
5. In the right panel, click the Data Permissions tab.
6. In the Optional section, toggle some or all optional permissions on.
7. Click Save changes.

4. Turn on the HubSpot connector in your Lovable workspace

A Lovable admin must turn on the HubSpot connector in Lovable before approved users can connect HubSpot to Lovable.

1. In Lovable, in the left sidebar menu, navigate to Connectors.
2. Search for and select HubSpot.
3. In the Features section, click Enable for both the Chat connector and App user connector.

After the connector is turned on, users with the required HubSpot permissions and installation access can connect HubSpot to Lovable.

Set up the HubSpot connector for Lovable

After a Super Admin has granted the required HubSpot permission and connector access, and a Lovable admin has turned on the connector, users can connect HubSpot to Lovable and start building apps.

1. Navigate to https://lovable.dev/ and log in to your Lovable account.
2. In the left sidebar menu, click Connectors.
3. Select HubSpot.
4. Click the + Add connection dropdown menu and select Chat Connector.

5. Click Connect.

6. Select the HubSpot account that a Super Admin has approved for you to access the connector.
7. Review the data and tools the connector can access in your HubSpot account. Optional permissions define the maximum permissions available to apps you build with the connector in Lovable, but aren’t all used automatically. An optional permission is only used when the app you’re building specifically requires it. To avoid reconfiguring permissions later, it's recommended that you select all available optional permissions. Selecting only some optional permissions can limit the apps and functionality you can build in Lovable. 

8. Review the terms and privacy policy. Then select the checkbox to accept the integration’s terms and conditions.
9. Click Connect app.

After connecting HubSpot to Lovable, you can use the connector to build an app in Lovable that uses HubSpot data.

If you encounter the error You don’t have the right permissions to install the HubSpot connector for Lovable during the installation process, ask a Super Admin to grant you the HubSpot connector for Lovable permission in HubSpot.

If you encounter the error You don’t have install access for this app, ask a Super Admin to approve your access to install the connector.

After installing the connector, choose how Lovable requests approval for tool calls. You can require approval for all tool calls, require approval only for specific tool calls, or always allow tool calls. The Always allow option can streamline the chat and help you reach results faster, but allows Lovable to make tool calls without further approval, giving you reduced visibility and control over connector activity.

Use the HubSpot connector for Lovable

After connecting HubSpot to Lovable, use natural language to describe the app or user interface you want Lovable to build:

1. In Lovable, enter a prompt describing the app or user interface you want to build and @mention HubSpot in your prompt. Then press Enter.

2. Select who can access the app after you publish it:

• • Internally to my workspace: only signed-in users in your Lovable workspace can access the published app.
  • Publicly for external users: anyone with the app URL can access the published app.

3. Click Next. The selected audience will be applied once you publish the app.

4. On the Provisioning HubSpot app section, review the app’s required permissions in HubSpot. Then click Allow.

5. Lovable will start generating a preview of your app. The preview usually takes a few minutes to appear.
6. In the app preview, click Connect HubSpot.

7. In the dialog box, select your HubSpot account.
8. Review the HubSpot data that your Lovable-built app can access.
9. Select the checkbox, then click Connect app.
10. Your HubSpot data will appear in the app preview.

The app will only surface HubSpot data that you're authorized to access based on your HubSpot user permissions. For example, if you can only view deals that you own, a Lovable app that displays HubSpot deals will only display the deals that you own.

Share a Lovable app with other users

Once you’ve built your app in Lovable, share it with other users in your workspace.

1. In the top right, click Publish.

2. Select who can view your app: your entire workspace or specific users.

3. To edit the app’s domain prefix, click the pencil icon next to the domain. Or click + Add domain to use a custom domain. 

4. Click Publish.
5. After the app is published, click Copy link to copy the app’s URL and share it with colleagues in your workspace who'll use the app.

1. Open the URL for the Lovable app.
2. Click Connect to HubSpot.
3. When prompted for approval, click Request to install. A request will be sent to the Super Admin in HubSpot.

4. After the admin approves the request, complete the app connection steps.

Remix Lovable templates

Use a pre-built template as a starting point, then customize the remixed project for your team's needs.

Before remixing a template, set up the HubSpot connector for Lovable and turn on the App User Connector option for your workspace.

1. Navigate to one of the following HubSpot's pre-built Lovable templates:
   • Pipeline Pulse: displays deal value, follow-up suggestions, and likelihood of closing to help you identify and prioritize revenue opportunities.
   • Campaign Compass: tracks campaign and email performance over time, including their influence on scheduled meetings and closed revenue.
   • Optimal Ops: displays HubSpot ticket data, including open and resolved ticket counts, resolution times, backlog age, and issues that need attention.
2. Log in to your Lovable workspace.
3. After the template loads, click Remix in the top right.
4. Enter a name for the project. If you have access to multiple workspaces, select the workspace where you want to create the project. Then, provide consent to remix the template.

5. Follow the instructions in the remixed project:

• • Copy the user authentication prompt.
  • Paste the prompt into the Lovable agent chat window.
  • Select the option to turn on HubSpot login for individual users.

6. Click Connect HubSpot.
7. Follow the authentication prompts to connect HubSpot and load your HubSpot data into the app.
8. Customize the app as needed.