How to Style Your White-Labeled Site in PromptForm

Complete Guide to Customizing Your Brand's Look and Feel

Prefer to watch a video? To view a video overview, click here.

Getting Started

This guide will walk you through everything you need to know about customizing the appearance of your white-labeled PromptForm site. You'll learn how to access the Style Editor, customize colors and layouts, and use advanced CSS and JavaScript when needed.

Table of Contents

1. Accessing the Style Editor
2. Setting Up a Test User
3. Understanding the Style Editor Interface
4. Editing Global Styles
5. Customizing Page-Specific Styles
6. Using Advanced Custom CSS
7. Adding Custom JavaScript
8. Best Practices and Tips
9. Troubleshooting

Accessing the Style Editor

There are two ways to access the Style Editor:

Method 1: From the Main Menu

1. Click your avatar in the top-right corner
2. Select Websites from the dropdown menu
3. Find your website in the list
4. Click Edit Styles

Method 2: From Website Properties

1. Navigate to your website's Properties page
2. Click the Edit Styles button

Both methods take you to the same Style Editor interface.

Setting Up a Test User

Important: Before you start styling, it's highly recommended to create a test user account so you can see your changes exactly as your customers will see them.

Why Create a Test User?

• View changes in real-time from your customer's perspective
• Test different styling scenarios without affecting your admin view
• Ensure the user experience matches your vision

How to Create a Test User

1. Go to Admin → Users
2. Click Add New User
3. Select your test website from the dropdown
4. Enter user details:
   • Email: Use your own email address (e.g., yourname+test@yourdomain.com)
   • Name: Test User (or any name you prefer)
   • Permissions: Select the plan that represents a normal user
   • Don't add additional permissions unless testing specific features
5. Click Send Invite
6. Open the invite email and set up the account
7. Log in as this test user in a separate browser tab

Pro Tip: Side-by-Side Testing

• Keep the Style Editor open in one tab
• Keep your test user account open in another tab
• Switch between tabs to see changes instantly

Understanding the Style Editor Interface

When you first open the Style Editor, you'll see several key components:

Main Layout

Left Panel: Live preview of your siteRight Panel: Style controls and optionsTop Bar: Page selector and action buttons

Key Elements

Page Selector

Shows which page you're currently editing. Options include:

• Global Styles (applies to all pages)
• Home
• Templates
• Apps/Bots
• App View
• Bot View
• Profile
• Login Screen

Style Tabs

Different sections of customizable elements appear based on the page you're editing.

Action Buttons

• Update: Saves your changes
• Reset: Reverts changes (with options to reset all pages or just the current page)

Editing Global Styles

Global styles apply across your entire website, ensuring consistency throughout your user's experience.

Layout Options

Container Mode vs. Full Width

Full Width Mode:

• Content stretches across the entire browser window
• Best for modern, immersive designs
• Creates a more spacious feel

Container Mode:

• Content is centered with fixed maximum width
• Best for readability and traditional layouts
• Creates focused content areas

To toggle between modes:

1. Navigate to Global Styles
2. Find the Layout section
3. Select Full Width or Container Mode

Body Styles

The body styles control the overall appearance of your site's background and default text.

Background Color

1. Find the Body section in Global Styles
2. Click the Background Color picker
3. Choose your brand color
4. The preview updates immediately

Background Image (Optional)

1. In the Body section, look for Background Image
2. Click Upload or enter an image URL
3. Adjust positioning and repeat settings as needed

Text Color

1. Find the Text Color option
2. Select a color that contrasts well with your background
3. Ensure readability (light text on dark backgrounds, or vice versa)

Example Setup:

• Dark background (#1a1a1a)
• White text (#ffffff)
• Creates a modern, high-contrast look

Breadcrumb Navigation

Breadcrumbs help users navigate your site hierarchy.

Styling States

You can customize three different states:

• Normal: Default appearance
• Hover: When users mouse over the breadcrumb
• Active: The current page in the breadcrumb trail

Best Practice: Use subtle color changes between states to maintain visual hierarchy.

Button Styles

Global button styles ensure consistency across all actions.

Button States to Customize

• Normal: Default button appearance
• Hover: When users hover over the button
• Active: When the button is clicked

Recommended Approach:

1. Start with your primary brand color for normal state
2. Use a slightly darker or lighter shade for hover
3. Add a subtle shadow or border change for active state

Customizing Page-Specific Styles

Each page type has unique elements you can style. When you select a specific page, the available style options change to match that page's components.

Navigation Bar (Navbar)

Controls the appearance of your main navigation menu.

Customizable Elements:

• Background color
• Text color
• Logo size and positioning
• Link hover states
• Mobile menu appearance

Sidebar

Controls any sidebar navigation or secondary menus.

Customizable Elements:

• Background color
• Width
• Text styling
• Active state highlighting

History Panel

Appears in app and bot views to show user's recent activity.

Customizable Elements:

• Background color
• Item styling
• Divider appearance
• Hover states

Forms

Applies to all form elements across your site.

Customizable Elements:

• Input field styling
• Button styles
• Label appearance
• Focus states
• Error message styling

Page-Specific Elements

Apps/Bots Page

• Card layout and styling
• Thumbnail appearance
• Title and description formatting
• Hover effects

App View/Bot View

• Chat interface styling
• Input area appearance
• Response formatting
• Action button styling

Profile Page

• Section layouts
• Field styling
• Avatar display
• Save button appearance

Using Advanced Custom CSS

When the built-in Style Editor doesn't provide enough control, you can add custom CSS for precise styling.

Enabling Custom CSS

1. Scroll to the Advanced section at the bottom of the Style Editor
2. Click the toggle to Activate Custom CSS
3. The CSS editor panel will appear

Writing Custom CSS

Opening the Full Editor

1. Click the Expand icon to open the full-screen CSS editor
2. You'll see a code editor with syntax highlighting
3. Auto-complete suggestions will appear as you type

Finding Elements to Style

Method 1: Inspect Your Live Site

1. Open your site as a test user in a separate tab
2. Right-click on the element you want to style
3. Select Inspect (or press F12)
4. Find the class name or element ID in the developer tools
5. Use these in your custom CSS

Method 2: Inspect the Preview

You can also inspect elements directly in the Style Editor preview.

CSS Syntax Example

/* Change the header background */
.header-main {
    background-color: #1a1a1a;
    border-bottom: 2px solid #ffffff;
}

/* Style all primary buttons */
.btn-primary {
    background-color: #4CAF50;
    border-radius: 8px;
    padding: 12px 24px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Customize form inputs */
input[type="text"],
textarea {
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
}

input[type="text"]:focus,
textarea:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

Toggling Custom CSS

You can turn your custom CSS on and off without deleting it:

1. Use the toggle switch at the top of the Custom CSS section
2. This is helpful for testing whether your custom styles are causing issues

Saving Your CSS

Critical: Always click the Update button after adding or modifying custom CSS. Your changes won't be saved otherwise.

Adding Custom JavaScript

JavaScript allows you to add interactive features, widgets, and dynamic functionality to your site.

Enabling Custom JavaScript

1. Find the JavaScript section in the Advanced area
2. Click to expand the JavaScript editor
3. Click the Expand icon for the full-screen editor

Common Use Cases

Adding Analytics

// Example: Google Analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Adding Chat Widgets

// Example: Intercom widget
window.intercomSettings = {
  app_id: "YOUR_APP_ID"
};

(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){
ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;
var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};
w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';
s.async=true;s.src='https://widget.intercom.io/widget/YOUR_APP_ID';
var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};
if(document.readyState==='complete'){l();}else if(w.attachEvent){
w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();

Custom Interactive Elements

// Example: Add a custom greeting based on time of day
document.addEventListener('DOMContentLoaded', function() {
    const hour = new Date().getHours();
    let greeting;
    
    if (hour < 12) {
        greeting = "Good morning!";
    } else if (hour < 18) {
        greeting = "Good afternoon!";
    } else {
        greeting = "Good evening!";
    }
    
    const greetingElement = document.querySelector('.user-greeting');
    if (greetingElement) {
        greetingElement.textContent = greeting;
    }
});

Testing JavaScript

After adding JavaScript:

1. Click Update to save
2. Test thoroughly in your live site as a test user
3. Check browser console for any errors (F12 → Console tab)

Best Practices and Tips

Save Early, Save Often

The Style Editor will warn you if you try to leave without saving. Make it a habit to:

• Click Update after each major change
• Test changes on your live site before moving to the next section

Use Consistent Brand Colors

• Define your brand colors once in Global Styles
• Reference these colors throughout your custom CSS
• Consider using CSS variables for even easier maintenance

Test Responsive Design

View your site on multiple screen sizes:

• Desktop (1920px+)
• Laptop (1366px)
• Tablet (768px)
• Mobile (375px)

Maintain Accessibility

• Ensure sufficient color contrast (minimum 4.5:1 ratio for text)
• Don't rely solely on color to convey information
• Test with keyboard navigation
• Use semantic HTML in custom code

Keep Custom CSS Organized

/* ===== HEADER STYLES ===== */
.header-main { ... }
.header-logo { ... }

/* ===== NAVIGATION STYLES ===== */
.nav-menu { ... }
.nav-item { ... }

/* ===== BUTTON STYLES ===== */
.btn-primary { ... }
.btn-secondary { ... }

Document Your Custom Code

Add comments to explain why you made certain styling choices, especially for complex CSS or JavaScript.

Troubleshooting

Changes Not Appearing

Problem: You made changes but don't see them on your live site.

Solutions:

1. Make sure you clicked the Update button
2. Hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R)
3. Clear your browser cache
4. Check if you're viewing the site as a logged-in user vs. a guest
5. Verify your DNS settings are correctly connected

Custom CSS Not Working

Problem: Your custom CSS isn't being applied.

Solutions:

1. Check if Custom CSS is toggled ON
2. Inspect the element to verify the class name is correct
3. Check for CSS syntax errors
4. Ensure your CSS selector is specific enough
5. Use !important sparingly as a last resort

Example:

/* If this doesn't work... */
.button {
    background-color: red;
}

/* Try being more specific */
.page-content .button-primary {
    background-color: red;
}

/* Or as a last resort */
.button {
    background-color: red !important;
}

JavaScript Errors

Problem: Custom JavaScript isn't working or causes errors.

Solutions:

1. Open browser console (F12 → Console) to see error messages
2. Verify external script URLs are correct and accessible
3. Ensure scripts load in the correct order
4. Wrap code in DOMContentLoaded event listener
5. Test in incognito mode to rule out browser extensions

Elements Overlapping or Misaligned

Problem: Page elements are overlapping or positioned incorrectly.

Solutions:

1. Check z-index values in your custom CSS
2. Verify position properties (relative, absolute, fixed)
3. Inspect padding and margin values
4. Reset to default styles and apply changes incrementally

Styles Work in Editor But Not on Live Site

Problem: Styles look correct in the preview but wrong on the actual site.

Solutions:

1. Verify your DNS is properly connected
2. Check if you're viewing in "Test Mode" vs. live
3. Look for conflicting styles from cached resources
4. Inspect the live site to see which styles are actually being applied

Getting Additional Help

When to Contact Support

If you encounter issues that you can't resolve:

• Structural problems with page elements
• Features that seem broken or missing
• Custom CSS that should work but doesn't
• Performance issues with the Style Editor

What to Include in Your Support Request

1. Website URL: Your white-labeled domain
2. Page Affected: Which page you're trying to style
3. What You're Trying to Do: Your styling goal
4. What You've Tried: Steps you've already attempted
5. Screenshots: Visual examples of the issue
6. Custom Code: Any CSS or JavaScript you've added

Contact Information

Reach out to the PromptForm support team through your admin panel chat or at the support@promptform.ai.

Quick Reference Checklist

Before launching your styled site, verify:

• [ ] DNS settings are connected and verified
• [ ] Global styles applied (colors, fonts, layout)
• [ ] Navigation bar styled and tested
• [ ] All page-specific styles customized
• [ ] Custom CSS syntax validated
• [ ] JavaScript tested and error-free
• [ ] Tested on desktop, tablet, and mobile
• [ ] Tested in multiple browsers (Chrome, Safari, Firefox)
• [ ] Color contrast meets accessibility standards
• [ ] Test user account created and working
• [ ] All styling changes saved via Update button
• [ ] Live site matches preview expectations

Next Steps

After styling your site:

1. Add users and grant them appropriate permissions
2. Configure your apps to match your brand's offerings
3. Set up payment integrations if monetizing your platform
4. Create user documentation specific to your branded experience
5. Launch and promote your white-labeled AI platform

Last Updated: November 2025 For the latest features and updates, always refer to your PromptForm admin dashboard.