# Integration UI/UX Revamp > Learn how to use the revamped Integration Page in GHL Customer Care with improved UI, faster performance, and simplified integration management. - Source: https://docs.ghlcustomercare.com/docs/integrations/other-integrations/integration-ui-ux-revamp - Section: Integrations / Other Integrations - Reading time: 4 min - Images: 6, each explained below - Modified on Wed, 6 May at 7:31 AM --- The revamped Integration Page in GHL Customer Care introduces a faster, cleaner, and more structured way to manage all your integrations. With a modern card-based layout, improved performance, and enhanced usability, users can now connect, manage, and troubleshoot integrations more efficiently.  This update also brings better scalability and consistency across all integrations. Understanding these changes helps you streamline your workflows and improve overall system performance. --- **TABLE OF CONTENTS** - [What is the Revamped Integration Page?](#what-is-the-revamped-integration-page) - [Key Benefits of the Revamped Integration Page](#key-benefits-of-the-revamped-integration-page) - [Card Layout & Navigation](#card-layout-and-navigation) - [Core Actions: Connect vs Manage](#core-actions-connect-vs-manage) - [Integration Options (3-Dot Menu)](#integration-options-3-dot-menu) - [Search & Discovery](#search-and-discovery) - [Account Management (Unified Modal)](#account-management-unified-modal) - [Form Mapping & Integration Configuration](#form-mapping-and-integration-configuration) - [Error Handling & Notifications](#error-handling-and-notifications) - [Performance & Reliability Improvements](#performance-and-reliability-improvements) - How To Set Up the Revamped Integration Page - [Frequently Asked Questions](#frequently-asked-questions) --- ## **What is the Revamped Integration Page?** The revamped Integration Page in GHL Customer Care is a redesigned interface that centralizes how users discover, connect, and manage integrations. It replaces the legacy layout with a structured, card-based system that improves usability, consistency, and performance while supporting future scalability. This update ensures that all integrations follow a unified design and interaction model, making it easier to navigate, manage accounts, and resolve issues without confusion. It also introduces standardized actions, improved error handling, and faster load times to enhance the overall experience. --- ## **Key Benefits of the Revamped Integration Page** The redesigned experience focuses on usability, performance, and consistency, making integration management more efficient and reliable. - **Improved User Experience:** A clean, card-based layout makes it easier to scan, find, and manage integrations. - **Faster Performance:** Reduced load times and optimized APIs provide a smoother experience. - **Simplified Management:** Unified actions like Connect and Manage streamline workflows. - **Better Visibility:** Clear error indicators and notifications help identify and resolve issues quickly. - **Enhanced Scalability:** Standardized design supports future integrations without inconsistencies. - **Stronger Security:** Backend improvements reduce risks and improve system reliability. --- ## **Card Layout & Navigation** The new card-based layout organizes each integration into a consistent and easy-to-understand format, helping users quickly identify available actions and important details without navigating through complex menus. Each integration appears as a card with: - Integration name and logo - Short description - Primary action button (Connect or Manage) - 3-dot menu for additional options - The layout is fully standardized across all integrations, ensuring a consistent experience ![Card Layout & Navigation (image 1 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155070532314/original/Cp1fvGeu2eXui58oy37Bx21UBf4O2x3uSA.png) **Card Layout & Navigation (image 1 of 6)** This screenshot appears in the "Card Layout & Navigation" section of "Integration UI/UX Revamp". The text alongside this image reads: The layout is fully standardized across all integrations, ensuring a consistent experience. This part of the guide covers 4 fields, listed below. Immediately after, the guide continues: Understanding the difference between Connect and Manage helps users take the correct action based on the current state of an integration, reducing confusion and improving workflow efficiency. - What this covers: The layout is fully standardized across all integrations, ensuring a consistent experience - Fields: Integration name and logo, Short description, Primary action button (Connect or Manage), 3-dot menu for additional options - Next: Understanding the difference between Connect and Manage helps users take the correct action based on the current state of an integration, reducing confusion and improving workflow efficiency. Full procedure: 1. Integration name and logo 2. Short description 3. Primary action button (Connect or Manage) 4. 3-dot menu for additional options --- ## **Core Actions: Connect vs Manage** Understanding the difference between Connect and Manage helps users take the correct action based on the current state of an integration, reducing confusion and improving workflow efficiency. - Connect: - Used when no account is linked - Starts the process of connecting a new integration - Manage: - Appears when an integration is already connected - Redirects to settings or allows management of linked accounts ![Core Actions: Connect vs Manage (image 2 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155070532400/original/5LXYm72H2m_EqdGFtuFdLatZ6h7B84ZxjQ.png) **Core Actions: Connect vs Manage (image 2 of 6)** This screenshot appears in the "Core Actions: Connect vs Manage" section of "Integration UI/UX Revamp". The text alongside this image reads: Understanding the difference between Connect and Manage helps users take the correct action based on the current state of an integration, reducing confusion and improving workflow efficiency. This part of the guide covers 5 fields, listed below. Immediately after, the guide continues: These actions dynamically update based on whether an integration is already configured. - What this covers: Understanding the difference between Connect and Manage helps users take the correct action based on the current state of an integration, reducing confusion and improving workflow efficiency. - Fields: Connect:, Used when no account is linked, Starts the process of connecting a new integration, Manage:, Appears when an integration is already connected - Next: These actions dynamically update based on whether an integration is already configured. Full procedure: 1. Connect: 2. Manage: These actions dynamically update based on whether an integration is already configured. --- ## **Integration Options (3-Dot Menu)** The 3-dot menu provides quick access to integration-specific actions, allowing users to manage settings, troubleshoot issues, and perform advanced configurations without leaving the Integration Page. Available options may include: - Support documentation - Form mapping - Troubleshooting tools - Disconnect options (per account or integration) - Integration settings ![Integration Options (3-Dot Menu) (image 3 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155070532512/original/7iLnmbrAzbmTuZhDinphCbd2QYZSMV1NDg.png) **Integration Options (3-Dot Menu) (image 3 of 6)** This screenshot appears in the "Integration Options (3-Dot Menu)" section of "Integration UI/UX Revamp". The text alongside this image reads: Support documentation Form mapping Troubleshooting tools Disconnect options (per account or integration) Integration settings. This part of the guide covers 5 fields, listed below. Immediately after, the guide continues: The built-in search functionality allows users to quickly locate integrations, especially useful for accounts with many connected services. - What this covers: Support documentation Form mapping Troubleshooting tools Disconnect options (per account or integration) Integration settings - Fields: Support documentation, Form mapping, Troubleshooting tools, Disconnect options (per account or integration), Integration settings - Next: The built-in search functionality allows users to quickly locate integrations, especially useful for accounts with many connected services. Full procedure: 1. Support documentation 2. Form mapping 3. Troubleshooting tools 4. Disconnect options (per account or integration) 5. Integration settings --- ## **Search & Discovery** The built-in search functionality allows users to quickly locate integrations, especially useful for accounts with many connected services. - Search bar located at the top of the page - Filters integrations in real time as you type - Helps reduce time spent scrolling through integrations ![Search & Discovery (image 4 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155070532595/original/DxYSp14GidUnF7xN_9e1GdJjY3hucBnfXw.png) **Search & Discovery (image 4 of 6)** This screenshot appears in the "Search & Discovery" section of "Integration UI/UX Revamp". The text alongside this image reads: Search bar located at the top of the page Filters integrations in real time as you type Helps reduce time spent scrolling through integrations. This part of the guide covers 2 fields, listed below. Immediately after, the guide continues: The unified account management modal centralizes all connected accounts for an integration, making it easier to manage multiple accounts in one place. - What to fill in: Search bar located at the top of the page Filters integrations in real time as you type Helps reduce time spent scrolling through integrations - Fields: Filters integrations in real time as you type, Helps reduce time spent scrolling through integrations - Next: The unified account management modal centralizes all connected accounts for an integration, making it easier to manage multiple accounts in one place. Full procedure: 1. Search bar located at the top of the page 2. Filters integrations in real time as you type 3. Helps reduce time spent scrolling through integrations --- ## **Account Management (Unified Modal)** The unified account management modal centralizes all connected accounts for an integration, making it easier to manage multiple accounts in one place. - View all connected accounts in a single modal - Mark a primary account - Add additional accounts - Perform account-specific actions (settings, reconnect, remove) - View error indicators for individual accounts ![Account Management (Unified Modal) (image 5 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155070703489/original/O5Re3nZPSW19Ne2fKpzOLW1rK6WeMGBTnA.png) **Account Management (Unified Modal) (image 5 of 6)** This screenshot appears in the "Account Management (Unified Modal)" section of "Integration UI/UX Revamp". The text alongside this image reads: View all connected accounts in a single modal Mark a primary account Add additional accounts Perform account-specific actions (settings, reconnect, remove) View error indicators for individual accounts. This part of the guide covers 3 fields, listed below. Immediately after, the guide continues: Form mapping enables seamless data transfer between external platforms and GHL Customer Care by aligning form fields with CRM fields, ensuring accurate data synchronization. - What this covers: View all connected accounts in a single modal Mark a primary account Add additional accounts Perform account-specific actions (settings, reconnect, remove) View error indicators for individual accounts - Fields: View all connected accounts in a single modal, Mark a primary account, View error indicators for individual accounts - Next: Form mapping enables seamless data transfer between external platforms and GHL Customer Care by aligning form fields with CRM fields, ensuring accurate data synchronization. Full procedure: 1. View all connected accounts in a single modal 2. Mark a primary account 3. Add additional accounts 4. Perform account-specific actions (settings, reconnect, remove) 5. View error indicators for individual accounts --- ## **Form Mapping & Integration Configuration** Form mapping enables seamless data transfer between external platforms and GHL Customer Care by aligning form fields with CRM fields, ensuring accurate data synchronization. - View available forms in a structured list - Enable or disable forms using toggles - Map form fields to CRM fields using the “Edit Fields” option - Save configurations directly within the modal ![Form Mapping & Integration Configuration (image 6 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155070703592/original/4y_ZHeRVLaxG-YJLHmW24O-jPUvkHq8hqg.png) **Form Mapping & Integration Configuration (image 6 of 6)** This screenshot appears in the "Form Mapping & Integration Configuration" section of "Integration UI/UX Revamp". The text alongside this image reads: View available forms in a structured list Enable or disable forms using toggles Map form fields to CRM fields using the “Edit Fields” option Save configurations directly within the modal. This part of the guide covers 3 fields, listed below. Immediately after, the guide continues: Improved error handling ensures that users can quickly identify and resolve issues without needing complex troubleshooting steps. - How to confirm: View available forms in a structured list Enable or disable forms using toggles Map form fields to CRM fields using the “Edit Fields” option Save configurations directly within the modal - Fields: View available forms in a structured list, Enable or disable forms using toggles, Map form fields to CRM fields using the “Edit Fields” option - Next: Improved error handling ensures that users can quickly identify and resolve issues without needing complex troubleshooting steps. Full procedure: 1. View available forms in a structured list 2. Enable or disable forms using toggles 3. Map form fields to CRM fields using the “Edit Fields” option 4. Save configurations directly within the modal --- ## **Error Handling & Notifications** Improved error handling ensures that users can quickly identify and resolve issues without needing complex troubleshooting steps. - Visual indicators highlight connection issues - Supports both: - Connection-level errors (specific account issues) - Integration-level errors (broader issues) - Allows faster diagnosis and resolution directly from the UI --- ## **Performance & Reliability Improvements** Behind-the-scenes enhancements significantly improve the speed, reliability, and scalability of the Integration Page, ensuring a smoother experience even as more integrations are added. - Faster page load times - Reduced system resource usage - Improved accessibility and usability - More reliable API performance - Consistent experience across all integrations --- ## **Frequently Asked Questions** **Q: Will my existing integrations be affected by this update?** No, all existing integrations will continue to work as expected. The update only improves the interface and management experience. **Q: What happens if an integration shows an error?** Error indicators will appear on the integration or account level, allowing you to take corrective actions such as reconnecting the account. **Q: How do I disconnect an integration?** You can disconnect integrations or individual accounts using the 3-dot menu or account management modal, with confirmation prompts for safety. **Q: Why do I see “Manage” instead of “Connect”?** “Manage” appears when an integration is already connected, allowing you to configure or update existing settings. **Q: Can I connect multiple accounts for one integration?** Yes, the unified account modal allows you to add and manage multiple accounts for supported integrations. --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com