Developing directly on HubSpot

HubSpot provides a suite of built-in features and customization options that allow businesses to develop directly within its ecosystem. These tools are particularly beneficial for straightforward projects and those who prefer to stay within the HubSpot environment.

1. HubSpot CMS: Utilize HubSpot’s content management system to create and manage website content. The CMS is equipped with drag-and-drop functionality, making it accessible for non-developers.
2. Custom Modules: Create custom modules within the HubSpot CMS to add unique functionalities tailored to your business needs.
3. HubSpot APIs: Use HubSpot’s APIs to fetch and display CRM data dynamically. This can include customer information, deal statuses, and more.

Pros:

• Direct development within HubSpot ensures seamless integration with existing HubSpot features, such as marketing, sales, and service tools.
• Utilizing HubSpot’s built-in tools provides access to extensive resources, including documentation, support, and community forums.
• Developing directly on HubSpot can streamline workflows, as all tools and data are within a single platform.

Cons:

• While HubSpot offers various customization options, they may be limited compared to what can be achieved with external tools and frameworks.
• Developers need to familiarize themselves with HubSpot’s proprietary systems, which may have a learning curve.

Using Softr

Softr is a powerful no-code platform that enables users to build sophisticated web applications, client portals, and more without writing a single line of code. It offers a user-friendly drag-and-drop interface, pre-built templates, and seamless integrations with various tools, including HubSpot.

Integration of HubSpot with Softr

Integrating HubSpot with Softr enables businesses to create customized client portals, forms, and other web applications that leverage HubSpot CRM data.

Here’s how to integrate HubSpot with Softr:

1. Open your web browser and navigate to Softr's website.
2. Log in to your Softr account using your credentials.
3. Once logged in, locate the navigation menu on the left side of the screen.
4. Click on "Data Sources" located in the lower-left corner of the dashboard.
5. In the Data Sources section, you will see various options for different data sources.
6. Select "HubSpot" from the list of available data sources.

7. Follow the prompts to choose your HubSpot account and authenticate the connection.

Using external technologies

For businesses requiring more advanced customization, using external technologies such as JavaScript frameworks and backend frameworks is a viable option. This approach provides full control over the development process and allows for highly customized solutions.

Step 1: API Setup

1. Register for API Access: 

Go to the HubSpot developer portal and register your application to obtain API keys. These keys will allow your application to interact with HubSpot’s APIs.

2. Set Up Authentication: 

Implement OAuth or API key authentication in your application. This step ensures that your application can securely access HubSpot data.

‍

• OAuth: OAuth is a more secure method of authentication that allows users to grant third-party applications access to their HubSpot data without sharing their credentials. Implement the OAuth flow to obtain access tokens and refresh tokens.
• API Keys: API keys provide a simpler method of authentication but should be handled securely. Store API keys in a secure location and avoid exposing them in client-side code.

Step 2: Frontend Development

1. Create Components: 

Develop UI components that will display CRM data. This includes creating tables, lists, and forms that interact with HubSpot APIs.

‍

• Data Display: Use JavaScript frameworks like React, Angular, or Vue to create dynamic components that fetch and display CRM data. Implement state management to handle data updates and reactivity.
• Forms: Create forms that allow users to submit data to HubSpot. Implement form validation and error handling to ensure data integrity.

2. Styling: 

Apply CSS and design principles to create a visually appealing user interface. Use CSS frameworks like Bootstrap or Tailwind to streamline the styling process.

• UX Considerations: Focus on creating a user-friendly interface that is intuitive and easy to navigate. Conduct user testing to identify and address usability issues.

Step 3: Deployment and Maintenance

1. Hosting Options: 

Choose a hosting service that suits your application’s needs. Options include AWS, Heroku, Netlify, and more.

• AWS: It offers scalable and reliable cloud hosting solutions. Services like Amazon S3, EC2, and Lambda can be used to host and manage your application.
• Heroku: Heroku is a platform-as-a-service (PaaS) that simplifies the deployment and management of web applications. It supports various programming languages and frameworks.
• Netlify: Netlify is a popular choice for hosting static websites and frontend applications. It offers features like continuous deployment, serverless functions, and global CDN.

2. Ongoing Updates: 

Regularly update your application to ensure it remains compatible with HubSpot’s APIs. Monitor for changes in API endpoints, authentication methods, and data structures.

• HubSpot Synchronization: Implement mechanisms to synchronize your application with HubSpot CRM data. This can include scheduled API calls, webhooks, and real-time data updates.
• Security Considerations: Ensure that your application adheres to security best practices. This includes securing API keys, implementing data encryption, and conducting regular security audits.

Step 1: Adding HubSpot as a Data Source

Log in to your Softr’s account and connect it with HubSpot using the method we shared above.

Step 2: Building Advanced Lead Capture Forms

1. Create a New Application:
   
   • In your Softr dashboard, navigate to create a new application. Start with a blank application template.

2. Add a Form Block:
   
   • In the application builder, go to the "Add Block" section.
   • Select a customizable form from the list of available blocks.
3. Customize Your Form:
   
   • Modify the form to include fields relevant to your business, such as name, email, phone number, and company name.

• Customize the submit button text and add a thank you message to display upon form submission.
• Optionally, enable reCAPTCHA for added security.
• Adjust the form's style and visibility settings as needed.

4. Connect Form to HubSpot:
   
   • Go to the "Data Source" section and select HubSpot.

• Choose the appropriate HubSpot object (e.g., Contacts) to which the form data should be submitted.
• Ensure that the form fields in Softr are mapped correctly to the corresponding fields in HubSpot.

5. Preview and Test the Form:
   
   • Click on "Preview" to see the form in action.

• Fill out the form with test data and submit it to ensure it correctly populates the data in HubSpot.

Step 3: Building Customized Client Portals

1. Create a New Portal Application:
   
   • In Softr, either create a new application or use an existing one.
   • Customize the application’s design, colors, and backgrounds to match your brand.

2. Add a Data Display Block:
   
   • Add a block that supports dynamic content, such as a list with horizontal cards.

• Connect this block to your HubSpot data source.

3. Display HubSpot Data:
   
   • Select the HubSpot object you want to display, such as Deals.

• Customize the display fields to show relevant information like deal name, stage, close date, and amount.
• Use the content section to map HubSpot fields to the display fields in Softr.

4. Add Action Buttons (Optional):
   
   • Add action buttons to allow users to add or modify data directly from the portal.
   • Configure the buttons to interact with your HubSpot data.

5. Set User Permissions:
   
   • Adjust the visibility settings to ensure that only authorized users can access the portal.
   • Set up user groups and assign permissions based on user roles.

Step 4: Granting External User Access

1. Manage External Access:
   
   • In your client CRM portal, find the option to manage external access.

• Configure the permissions to control what data external users can access.

2. Add Users:
   
   • Add external users by entering their email addresses.

• Choose to invite users via a magic link or generate a temporary password.

3. Set Up User Groups:
   
   • Create user groups and assign users based on specific criteria or manually.

• Ensure the correct permissions are set for each user group.

4. Test External Access:
   
   • Invite an external user and verify they have the appropriate access level.
   • Ensure the external user can interact with the CRM data as intended.