Cyclr Community
  • Forums
  • Tutorials
  • Documentation
    • User Documentation
    • Connector Guides
  • Resources
    • New Features
    • Blog
    • Changelog
    • Support Portal
    • Newsletter Archive
    Sign in
    Cyclr Logo
    Cyclr Logo
    • Forums
    • Tutorials
    • Documentation
      • User Documentation
      • Connector Guides
    • Resources
      • New Features
      • Blog
      • Changelog
      • Support Portal
      • Newsletter Archive

    About Cyclr

    6
    • Introduction to Cyclr
    • Minimum requirements
    • Glossary
    • Errors
    • IP Allow List
    • Legal notices

    Cyclr Console

    14
    • Partner Console Dashboard
    • The Builder
    • Reports
    • Console Configuration
    • General Settings
    • Notifications
    • Embedding Customization
    • Security settings
    • Data retention settings
    • Custom Service Domains
    • Handle transaction errors
    • Payload Size Limitations
    • Performance tips
    • GitHub Integration

    Connectors

    33
    • Introduction to Connectors
    • Connectivity Comparison
    • Connector Guides
    • Application Connectors
      • Introduction to Application Connectors
    • Utility Connectors
      • Introduction to Utility Connectors
      • Counter Storage
      • Cross Updating Preventer
      • Data Tools
      • Entity Cross Ref Storage
      • Generic File
      • Generic File Downloader
      • Generic Form
      • Generic Webhook
      • Data Storage
        • Introduction to Data Storage Connectors
        • Global Data Storage
        • Global Object Storage
        • Cycle Data Storage
        • Cycle Object Storage
    • Custom Connectors
      • Introduction to Custom Connectors
      • Methods
      • Triggers
      • Last Successful Run Date
      • Parameters
      • Scripting
      • Data Types
      • Paging
      • Custom Objects
      • Dynamic Custom Fields
      • Automatically Install Webhooks
      • Connector Standards
      • Settings
      • Authentication
      • Rate Limits

    Templates

    17
    • Introduction to Templates
    • Template Settings
    • Create a Template
    • Tools
    • Connectivity Tools
    • Map fields
    • Add Custom Fields
    • Custom Object Method Categories
    • Test Scripts
    • Collection splitting
    • Pass data between two steps
    • Test a template
    • Template versioning
    • Introduction to Cycles
    • Stop a cycle
    • Copy Cycles as Templates
    • Import or Export Templates

    Accounts

    5
    • Introduction to Accounts
    • Account Users
    • Sub Accounts
    • Connector Authentication Link
    • Export or Import Cycles

    Embedding

    17
    • Introduction to Embedding
    • ORBIT
    • Installing a Partner Connector
    • Embed Cyclr in an iFrame
    • Launch
      • Introduction to Launch
      • User Experience
      • Customize Appearance
      • Build Compatible Templates
      • Handle LAUNCH callbacks
      • Deploy LAUNCH
    • Marketplace
      • Introduction to Marketplace
      • Set up a Marketplace
      • Styling Marketplace
      • Deploying a Marketplace
      • Marketplace Callback
      • Marketplace Webhook Callback
      • Marketplace Settings

    API

    19
    • Introduction to the Cyclr API
    • Authentication
    • Authorize Account API calls
    • Install Connectors into an Account
    • Install a Cycle from a Template
    • Step Setup
    • Activate a Cycle
    • Install Connectors
    • Create an Account
    • API Example Walkthrough
    • Connector Authentication
      • Introduction to Connector Authentication
      • API Key Authentication
      • HTTP Basic Authentication
      • OAuth Authentication
    • Data on Demand
      • Introduction to Data on Demand
      • Get Account Connectors
      • Get Connector Methods
      • Call a Connector Method
      • IP Restriction

    Release Notes

    28
    • Introduction to Release Notes
    • 2025
      • 2025-06
      • 2025-05
      • 2025-04
      • 2025-03
      • 2025-02
      • 2025-01
    • 2024
      • 2024-12
      • 2024-11
      • 2024-10
      • 2024-09
      • 2024-08
      • 2024-07
      • 2024-06
      • 2024-05
      • 2024-04
      • 2024-03
      • 2024-02
      • 2024-01
    • 2023
      • 2023-12
      • 2023-11
      • 2023-10
      • 2023-06
      • 2023-05
      • 2023-04
    • Archive
      • Archive
      • 2022
      • 2021
    View Categories
    • Home
    • Documentation
    • Embedding
    • Launch
    • Customize Appearance

    Customize Appearance

    2 min read

    To preview an instance of LAUNCH in the Cyclr console, go to Embedding > LAUNCH and select the Try LAUNCH button.

    This shows a pop up with any published integration templates that you have.

    Customize LAUNCH #

    You can customize the appearance of your LAUNCH flow with CSS and HTML styling.

    To edit the appearance of LAUNCH in the console, go to Settings > Appearance Settings.

    Application Custom CSS

    To restyle your LAUNCH layout, you can add CSS to the Application Custom CSS field. You can use the following elements and classes to customize appearance:

    ElementCSS ClassExplanation
    Create/Active Button.btn-successThe button that the user uses to select an integration template.
    LAUNCH Backgroundbody.launchThe background and color settings of your instance of LAUNCH.
    Application Icons.icon-smThe way in which LAUNCH displays application logos.
    Integration Template Description.template-descriptionThe font format for integration descriptions.

    Example styling #

        .btn-success {
            background-color: #d27;
            border-color: #d27;
            color: #fff;
        }
    
        body.launch {
            background-color: #f6f27f;
            padding: 20px 20px 20px 20px;
        }
    

    Header HTML and Footer HTML #

    You can also use HTML to create your own custom header and footer for your version of LAUNCH.

    On the Appearance Settings page, there are fields for both the Header and the Footer. You can use both of these fields to add custom messages or images that you want to display for your users.

    Example header #

    <div class="header"> 
    
    <h2>Test Heading</h2>
    
    <p>This is a test message to show your users. You can add instructions for how to set up integrations here.</p>
    
    </div>
    

    If you want to add specific styling to a message, you can wrap the message in a custom div. This means you can add the styling to the Application Custom CSS field, like below:

        .header {
            padding: 20px 0 20px 0;
        }
    

    LAUNCH Complete HTML #

    You can use the LAUNCH Complete HTML field to customize the window that the user sees once they successfully install an integration through LAUNCH. You can add the HTML to this field, and add any CSS definitions into the Application Custom CSS field.

    For more information on how to edit the LAUNCH Complete page, see the documentation on how to handle LAUNCH callback.

    Share This Article :
    • Facebook
    • X
    • LinkedIn
    • Pinterest
    User ExperienceBuild Compatible Templates
    Page Contents
    • Customize LAUNCH
      • Example styling
    • Header HTML and Footer HTML
      • Example header
    • LAUNCH Complete HTML

    Company

    • Company
    • About Us
    • Security and Compliance
    • Pricing
    • Blog
    • Branding
    • Embedded iPaaS

    Legal

    • Website Terms
    • Privacy Policy
    • Terms and Conditions
    • Data Protection Agreement
    • SLA
    • GDPR

    UK Office

    +44 (0) 3300 102 525

    US Office

    +1 (646) 585-2525


    White labelled API integration framework for creating & managing in-app SaaS integrations.

    © 2025 Cyclr. All rights reserved.