Skip to main content

Connect UI Customization

Learn how to customize Connect UI to match your brand and application design.

Branding Options​

Custom Domain​

Configure a custom domain for your Connect UI:

{
  "dockProfile": {
    "id": "your-profile-id",
    "customDomain": "connect.yourdomain.com"
  }
}

Theme Configuration​

Customize colors, fonts, and styling:

{
  "theme": {
    "primaryColor": "#1a73e8",
    "backgroundColor": "#ffffff",
    "textColor": "#202124",
    "borderRadius": "8px",
    "fontFamily": "'Inter', sans-serif"
  }
}

Layout Options​

Embedded Layout​

Best for seamless integration within your application:

<iframe
  src="https://dock.unizo.ai/links/YOUR_SERVICE_KEY"
  style="width: 100%; height: 600px; border: none;"
/>

Ideal for settings pages or one-time setup:

window.open(
  `https://dock.unizo.ai/links/${serviceKey}`,
  'Connect UI',
  'width=600,height=700'
);

Advanced Customization​

Custom Provider Order​

Control the order in which providers appear:

{
  "providerOrder": ["github", "gitlab", "bitbucket"]
}

Filtered Providers​

Show only specific providers:

{
  "allowedProviders": ["github", "jira", "slack"]
}

Custom Messages​

Personalize the user experience:

{
  "messages": {
    "welcome": "Connect your development tools",
    "success": "Successfully connected!",
    "error": "Please try again"
  }
}

CSS Customization​

For advanced styling, you can apply CSS to the iframe container:

.connect-ui-wrapper {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.connect-ui-wrapper iframe {
  border-radius: 8px;
  overflow: hidden;
}

Best Practices​

  1. Maintain consistency - Match your app's design language
  2. Test on all devices - Ensure responsive behavior
  3. Consider accessibility - Maintain proper contrast ratios
  4. Keep it simple - Don't over-customize at the expense of usability