Managing leads is a complex task that requires precision and the right tools to ensure no opportunity is missed. Yet, many companies find themselves constrained by systems that don’t fully meet their unique needs. What if there were a solution that streamlines your workflow?
Integrating HubSpot’s robust CRM with Retool’s adaptable app-building platform offers precisely that. This powerful combination allows you to customize your lead management processes, providing clarity and efficiency that standard tools might lack.
In this blog, we’ll guide you how to build a Retool app that works seamlessly with HubSpot, enabling you to optimize your lead management process and drive better results for your business.
About HubSpot
HubSpot is a leading customer relationship management (CRM) platform that provides tools for marketing, sales, and customer service. It helps businesses manage customer interactions, track leads, and streamline their sales processes. By integrating HubSpot with Retool, you can leverage HubSpot’s powerful CRM capabilities while customizing your workflows in Retool.
Getting Started with HubSpot
Before diving into the integration, let's start with some essential setup in HubSpot. These initial steps ensure your data is organized and ready for seamless integration with Retool.
Create a Custom LinkedIn Property
To manage your leads effectively, create a custom LinkedIn property in HubSpot. This allows you to store LinkedIn profile links for each lead, enhancing your data's richness and making it easier to connect with leads on LinkedIn.
Navigate to HubSpot Settings:
Go to your HubSpot account.
Click on your profile picture in the top-right corner.
Select "Settings" from the drop-down menu.
Select Properties:
In the left sidebar, find the "Data Management" section.
Click on "Properties" within this section.
Create a Property:
Click the "Create Property" button located at the top right.
Fill in the required fields for your new property:
Group: Choose the appropriate group where this property should belong, such as "Contact Information."
Label: Enter "LinkedIn Profile" as the property name.
Description: Provide a brief description, such as "LinkedIn profile link for lead."
Field Type: Select "URL" as the field type to ensure consistency and proper formatting.
By adding a LinkedIn property, you ensure all relevant lead information is readily accessible, facilitating better outreach and engagement.
Customize Lead Status Property
Customizing the lead status property to better reflect your sales process is crucial. This step helps in segmenting and managing leads based on their status, allowing you to track their progress through your sales funnel.
Access Lead Status Property:
Follow the same steps to reach the "Properties" section as mentioned above.
Edit Lead Status:
Locate the "Lead Status" property in the list.
Click on the "Edit" button next to the "Lead Status" property.
Add Custom Statuses:
In the edit screen, you can add, edit, or remove statuses.
Add custom statuses that match your sales workflow. Examples of custom statuses include:
Contacted: Initial contact has been made with the lead.
Qualified: The lead has been qualified as a potential customer.
Follow-up Required: Further follow-up actions are needed.
Closed-Won: The lead has converted to a customer.
Closed-Lost: The lead will not be pursued further.
Customizing lead statuses helps you track leads more efficiently, ensuring no potential customer slips through the cracks.
Setting Up the Integration
With HubSpot ready, it's time to connect it with your Retool app. This involves syncing your HubSpot data with a PostgreSQL database and setting up Retool to use this database. Here’s how you can do it step-by-step.
About Sequin
Sequin is a data integration platform that simplifies the process of syncing data from various sources into your PostgreSQL database. It allows you to connect HubSpot and other services, ensuring your data is always current and accessible for analysis and reporting.
Connect HubSpot to Postgres Using Sequin
Sequin provides a seamless way to sync HubSpot data to a PostgreSQL database, making it easy to query and manipulate data in Retool.
Sign Up for Sequin:
Connect HubSpot:
Login to Sequin: Once your account is created, log in to Sequin.
Add New Integration: From the Sequin dashboard, click on "Add New Integration."
Select HubSpot: Choose HubSpot from the list of available integrations.
Authorize HubSpot Access: You will be redirected to HubSpot’s login page. Enter your HubSpot credentials and authorize Sequin to access your HubSpot account.
Configure Data Sync: Select the specific data you want to sync, such as contacts, deals, and other relevant entities. Configure any additional settings as needed.
Sync Data:
Initial Sync: Once the HubSpot account is connected, Sequin will begin an initial data sync. This process might take some time, depending on the volume of data.
Verify Data Sync: Check the status of the sync on the Sequin dashboard to ensure all selected data has been successfully transferred to your PostgreSQL database.
Syncing your data with Sequin ensures that you always have the latest information available for your Retool app.
Setup Postgres Resource in Retool
Configuring Retool to use your PostgreSQL database is straightforward.
About Retool
Retool is a powerful platform for building custom internal tools quickly and efficiently. It allows you to connect to various data sources, build intuitive user interfaces, and automate workflows using SQL and JavaScript. Retool’s drag-and-drop interface makes it easy to create sophisticated apps without extensive coding knowledge.
Create a New Resource:
Login to Retool: Open your web browser and go to your Retool dashboard. Log in with your credentials.
Navigate to Resources: On the left-hand sidebar, click on "Resources."
Add New Resource: Click the "Create New" button.
Select PostgreSQL:
Choose Resource Type: In the "Create New Resource" dialog, select "PostgreSQL" from the list of database options.
Enter Connection Details: Fill in the connection details provided by Sequin. These details typically include:
Host: The address of your PostgreSQL server.
Port: The port number for your PostgreSQL server (usually 5432).
Database Name: The name of the PostgreSQL database where your HubSpot data is stored.
User: The username for your PostgreSQL database.
Password: The password for your PostgreSQL database.
Test Connection:
Verify Details: Double-check the entered details for accuracy.
Test Connection: Click the "Test Connection" button to ensure that Retool can successfully connect to your PostgreSQL database.
Save Resource: If the connection is successful, click "Create Resource" to save the configuration.
By setting up the Postgres resource, you establish a reliable data pipeline between HubSpot and Retool.
Also read: Building Custom Software with Retool
Building the Retool App
Now comes the exciting part: building the Retool app itself. This section will guide you through setting up the app, configuring data sources, and building a user-friendly interface.
App Setup: Create a New App and Add Essential Components
Start a New App:
Navigate to Retool Dashboard: Log in to your Retool account and go to the dashboard.
Create a New App: Click on the "Create New" button and select "App" from the drop-down menu.
Name Your App: Provide a name for your app, such as "Lead Management," and click "Create App."
Add Components:
Add a Table Component:
Drag and Drop: In the left sidebar, find the table component and drag it onto your app canvas.
Position the Table: Place the table component in the desired position on the canvas.
Add a Text Input Component:
Drag and Drop: Locate the text input component in the sidebar and drag it onto the canvas.
Label the Input: Rename the text input to "Search by Name" for clarity.
Position the Input: Place the text input above the table component for easy access.
Add a Multi-Select Input Component:
Drag and Drop: Find the multi-select input component and drag it onto the canvas.
Label the Input: Rename the multi-select input to "Filter by Status."
Position the Input: Place the multi-select input next to the text input for a cohesive layout.
Setting up your app’s basic structure ensures you have a solid foundation for more advanced functionalities.
Build a Searchable Lead Table
Add Table Component:
Drag and Drop: If not already added, drag the table component onto your app canvas.
Configure Data Source:
Open Table Settings: Click on the table component to open its settings panel.
Set Data Source: In the data source section, select your PostgreSQL database.
Write SQL Query:
Enter a basic SQL query to fetch leads:
sqlSELECT * FROM leads;
Add Search and Filter Inputs:
1. Configure Text Input for Search:
Bind Input to Query: In the text input settings, bind the input value to a variable, e.g., searchInput.
Modify SQL Query:
Update your table's SQL query to include a WHERE clause for the search functionality:sqlSELECT * FROM leads
WHERE name ILIKE '%' || {{ searchInput.value }} || '%';
2. Configure Multi-Select Input for Filter:
Bind Input to Query: In the multi-select input settings, bind the selected values to a variable, e.g., statusFilter.
Modify SQL Query: Further update your table's SQL query to include a filter for lead status:sqlSELECT * FROM leads
WHERE name ILIKE '%' || {{ searchInput.value }} || '%'
AND status = ANY({{ statusFilter.value }});
Refining your SQL query will enhance the search and filter functionality.
SQL Query Configuration
Modify SQL Query:
Open SQL Query Editor: Click on the table component and open the SQL query editor.
Update Query for Dynamic Search and Filter:
Dynamic Search Clause: Add a WHERE clause for searching by name:sqlSELECT * FROM leads
WHERE name ILIKE '%' || {{ searchInput.value }} || '%';
Dynamic Filter Clause: Add a clause for filtering by lead status:sqlSELECT * FROM leads
WHERE name ILIKE '%' || {{ searchInput.value }} || '%'
AND status = ANY({{ statusFilter.value }});
This query dynamically adjusts based on the input fields, ensuring users can find specific leads quickly.
By configuring SQL queries, you ensure your data is always relevant and easily accessible.
Enhancing the User Interface
Improving the user interface (UI) of your Retool app is essential for creating a seamless and efficient user experience. A well-designed UI ensures that users can navigate the app effortlessly and focus on the most critical tasks.
Remove Unnecessary Columns and Format Existing Ones
A clutter-free table enhances readability and user interaction.
Edit Table Columns: Remove any irrelevant columns from the table and format the remaining ones to improve readability. Adjust column widths and text alignment for clarity.
Adjust Column Order: Arrange columns in a logical sequence that matches the workflow of your users. Prioritize the most frequently used information.
Tooltip and Help Text: Add tooltips or help text to column headers to provide additional context or instructions, ensuring users understand the purpose of each column.
Highlight Important Fields
Visual cues can significantly improve data interpretation and user focus.
Conditional Formatting: Use conditional formatting to highlight key fields such as lead status and priority. This visual cue helps users focus on critical data points.
Color Coding: Apply color coding to different lead statuses to make it easier to distinguish between various stages at a glance.
Icons and Symbols: Incorporate icons or symbols next to key fields (e.g., a star icon for high-priority leads) to enhance visual recognition.
Extending App Functionality
By extending your app’s functionality, you can add new features that streamline processes, improve user interaction, and provide more insights into your leads and tasks.
Add Components for Detail Viewing and Editing
Creating dedicated sections for viewing and editing lead details makes the app more interactive and user-friendly.
Input Forms and Avatar Component: Add input forms for editing lead details and an avatar component for displaying lead photos. These forms should be bound to the data in your table, allowing for real-time updates.
Expandable Rows: Implement expandable rows in your table to display additional lead information without navigating away from the main view.
Modal Windows: Use modal windows to present detailed lead information or edit forms. This approach keeps the main interface clean while providing access to detailed data when needed.
Quick Link Buttons
Providing quick access to external resources enhances the functionality of your app.
Add Buttons for External Searches: Add buttons to quickly search LinkedIn, Crunchbase, and company websites:jsx<Button text="LinkedIn" onClick={{ window.open('https://www.linkedin.com/in/' + table1.selectedRow.data.linkedin) }} />
<Button text="Crunchbase" onClick={{ window.open('https://www.crunchbase.com/organization/' + table1.selectedRow.data.company) }} />
<Button text="Website" onClick={{ window.open(table1.selectedRow.data.website) }} />
Social Media Integration: Integrate social media buttons to share or follow lead profiles directly from the app.
Handle Data Updates
Ensuring data consistency and real-time updates is crucial for effective lead management.
SQL Queries for Updating Leads: Write SQL queries to update lead information and connect them to your input forms.
For example:
sqlUPDATE leads
SET name = {{ nameInput.value }},
status = {{ statusInput.value }}
WHERE id = {{ table1.selectedRow.data.id }};
Event Handlers: Set up event handlers to trigger these queries when users save their changes. This ensures data consistency and real-time updates.
Real-time Feedback: Provide real-time feedback to users when data updates are successful or if an error occurs.
Bulk Editing Lead Status
Enabling bulk actions can significantly enhance efficiency, especially for large datasets.
Enable Editable Table Column: Configure the lead status column to be editable directly within the table. This allows users to change the status of multiple leads quickly.
Create Bulk Update Query: Write a query to update multiple leads at once and connect it to an event handler.
sqlUPDATE leads
SET status = {{ bulkStatus.value }}
WHERE id = ANY({{ selectedRows.value.map(row => row.id) }});
Select All and Deselect: Add options to select all or deselect all rows to simplify bulk actions.
Confirmation Dialogs: Implement confirmation dialogs before applying bulk updates to prevent accidental changes.
Next Steps: Customize Further and Integrate Additional Functionalities
With your Retool app now integrated with HubSpot and set up for managing leads efficiently, the journey doesn't end here. To maximize the potential of your app, consider adding further customizations and integrating additional functionalities that can enhance your workflows and provide deeper insights. Here are detailed steps and ideas to help you take your Retool app to the next level.
Task Management Integration
Integrate task management features to keep track of follow-ups and important actions.
1. Create Task Table:
Add New Table in PostgreSQL: Create a new table in your PostgreSQL database to store tasks. Define columns such as task ID, lead ID, task description, due date, status, and assigned user.sqlCREATE TABLE tasks (
id SERIAL PRIMARY KEY,
lead_id INT,
description TEXT,
due_date DATE,
status VARCHAR(50),
assigned_user VARCHAR(50)
);
Sync with Retool: Add this new table as a resource in Retool, following similar steps as before.
2. Design Task Management Interface:
Task List Component: Add a table component in Retool to display tasks. Configure it to fetch data from the newly created task table.
Task Form: Create a form for adding and updating tasks. Include input fields for task description, due date, status, and assigned user. Bind these fields to the task table for real-time updates.
Automation: Set up automation to trigger notifications or reminders for upcoming tasks. Use Retool’s scripting capabilities to send emails or in-app notifications.
Advanced Analytics and Reporting
Leverage advanced analytics to gain deeper insights into your lead management process.
1. Data Visualization:
Charts and Graphs: Use Retool’s chart components to visualize key metrics such as lead conversion rates, average lead response times, and task completion rates. Connect these components to SQL queries that aggregate and analyze your lead data.
Dashboard: Create a comprehensive dashboard that displays all relevant metrics and KPIs. Customize it to include filters and date range selectors for dynamic reporting.
2. Custom SQL Queries:
Performance Analysis: Write custom SQL queries to analyze sales team performance. For example, track the number of leads contacted, leads converted, and the time taken to move leads through different stages.sqlSELECT
assigned_user,
COUNT(*) AS total_leads,
SUM(CASE WHEN status = 'Closed-Won' THEN 1 ELSE 0 END) AS converted_leads,
AVG(EXTRACT(DAY FROM age(closed_date, created_date))) AS avg_time_to_convert
FROM leads
GROUP BY assigned_user;
Trend Analysis: Create queries to identify trends in lead generation and conversion over time. Use this data to forecast future performance and make data-driven decisions.
Workflow Automation
Implement workflow automation to streamline repetitive tasks and improve efficiency.
1. Automated Lead Assignment:
Assignment Rules: Set up rules to automatically assign leads to sales representatives based on criteria such as lead source, location, or industry.sqlUPDATE leads
SET assigned_user =
CASE
WHEN location = 'North America' THEN 'John Doe'
WHEN location = 'Europe' THEN 'Jane Smith'
ELSE 'Other'
END
WHERE assigned_user IS NULL;
Triggers: Use Retool’s event handlers to trigger lead assignments as soon as new leads are added to the database.
2. Follow-Up Reminders:
Automated Emails: Configure automated email reminders for follow-ups. Integrate with email APIs such as SendGrid to send emails when tasks are due or when a lead has been inactive for a specified period.
In-App Notifications: Set up in-app notifications for tasks and lead status updates. This keeps your team informed and ensures timely action.
Enhanced User Experience
Improve the user experience by adding features that make the app more intuitive and user-friendly.
Customizable Views:
User Preferences: Allow users to save their preferred view settings, such as column order, filters, and sort preferences. Store these settings in the database and apply them when the user logs in.
Personalized Dashboards: Enable users to create and customize their own dashboards with widgets that display the metrics and information they care about the most.
Mobile Optimization:
Responsive Design: Ensure your Retool app is responsive and works well on mobile devices. Adjust the layout and components to provide a seamless experience across different screen sizes.
Mobile-Specific Features: Add mobile-specific features such as swipe actions for lead status updates or quick access buttons for common tasks.
Security and Permissions
Enhance the security of your app and ensure that users have appropriate access levels.
User Roles:
Define Roles: Create user roles such as Admin, Manager, and Sales Representative. Define permissions for each role, specifying which parts of the app they can access and which actions they can perform.
Role-Based Access Control: Implement role-based access control (RBAC) in Retool to enforce these permissions. Use Retool’s built-in authentication and authorization features to manage user roles and permissions.
Data Privacy:
Sensitive Data Handling: Ensure that sensitive data, such as lead contact information and internal notes, is handled securely. Use encryption and other security best practices to protect this data.
Audit Logs: Implement audit logs to track user actions within the app. This helps in monitoring usage patterns and identifying any unauthorized access or changes.
By taking these next steps, you can significantly enhance the functionality and usability of your Retool app. Continuous improvement and customization will ensure that your lead management system remains robust, efficient, and aligned with your business needs. Stay ahead of the competition by leveraging these advanced features and providing your team with the best tools to succeed.
Conclusion
By following these steps, you have successfully developed a robust Retool application that seamlessly integrates with HubSpot. This integration streamlines your lead management processes, offering you a centralized platform for efficiently viewing, updating, and managing leads.
To further enhance your technological capabilities, consider exploring ToolPioneers. ToolPioneers utilizes Retool to build custom internal tools that enhance operational efficiency and drive business growth. They provide a comprehensive suite of tools, expert insights, and professional guidance designed to help you maximize your business operations.
Partner with ToolPioneers to create innovative solutions that deliver real results.