Styling

The Pointer Playground at https://app.pointer.so/playground provides a powerful visual editor for customizing your widget’s appearance and behavior in real-time. Design your widget without writing any code using an intuitive interface that lets you see changes instantly.

​

Playground overview

The playground editor is organized into four main customization sections:

​

Display section

​

View type selection

Choose between two distinct widget presentation styles:

​

Classic chat widget

• Traditional chat interface: Familiar chat bubble design that users expect
• Standard positioning: Appears as a floating chat icon, typically in the bottom corner
• Conversation-focused: Optimized for direct question-and-answer interactions

​

Modern command menu

• Contemporary interface: Sleek, command palette-style design
• Enhanced functionality: Better suited for complex interactions and multiple options
• Professional appearance: Modern aesthetic that fits well with contemporary applications

​

Content blocks

Customize your widget’s content using flexible block components. All widgets require a chat block, with additional blocks available for enhanced functionality:

​

Chat block (required)

Configure the core conversational interface:

• Chat avatar: Upload or select an avatar image for the AI assistant
• Title: Display name for your AI assistant
• Description: Brief explanation of what the assistant can help with

​

External link block

Add direct links to important pages or resources:

• Title: Descriptive text for the link
• URL: Destination where users will be directed
• Use cases: Link to documentation, support pages, or product features

​

Featured item block

Highlight key content, announcements, or important information:

• Title: Headline for the featured content
• Description: Detailed explanation or announcement text
• URL: Optional link for more information
• Banner/image: Visual element to make the item stand out

​

Email block

Provide direct contact options for users:

• Title: Label for the email action (e.g., “Contact Support”)
• Email address: Target email where messages will be sent

​

Block management

• Reordering: Drag and drop blocks to arrange them in your preferred order
• Individual options: Each block type has specific configuration options
• Dynamic layout: Blocks automatically adjust to different screen sizes

​

Welcome section

Configure the initial user experience when the widget opens:

​

Conversation launch

Control how users enter conversations:

• Launch into conversation: Toggle to automatically open the chat view when widget loads
• Home view: When disabled, users see the home view with blocks and options first
• Direct chat: When enabled, users go straight to the conversation interface

​

Welcome messages

Customize the greeting users see when starting a conversation:

​

Heading

• Primary greeting: Main welcome message (e.g., “Hi there 👋”)
• Personalization: Can include friendly emojis or brand-specific language
• First impression: Sets the tone for the entire interaction

​

Subheading

• Supporting text: Additional context or call-to-action (e.g., “How can we help?”)
• Clarification: Helps users understand what they can ask or do
• Guidance: Provides direction for productive conversations

​

Try asking suggestions

Provide users with example questions to get conversations started:

​

Sample questions

• Question variety: Include different types of inquiries users might have
• Character limits: Questions display with character count indicators
• Default examples: Starter questions like “How do I get started?” or “What features are available?”
• Customization: Tailor questions to your specific product or service

​

Triggers section

Control how and when your widget appears to users:

​

Custom trigger configuration

Set up advanced triggering behavior for specialized integrations:

​

Custom trigger toggle

• Default behavior: Widget appears with standard launcher button
• Custom integration: Hide default launcher and use your own trigger element
• Advanced control: Perfect for embedding the widget into existing UI elements

​

Trigger ID setup

When custom triggers are enabled:

• Element targeting: Specify the ID of the HTML element that should trigger the widget
• Example format: Use IDs like pointer-trigger or help-button
• Integration requirement: Your development team needs to add this ID to the appropriate element
• Widget behavior: Clicking the custom element will open the Pointer widget

​

Implementation considerations

• Hidden launcher: Custom triggers hide the default floating widget button
• Seamless integration: Widget appears to be part of your existing interface
• User experience: Provides more control over when and how users access help

​

Design section

Customize the visual appearance to match your brand identity:

​

Color customization

Configure a comprehensive color palette for consistent branding:

​

Primary colors

• Primary color: Main brand color used for buttons and key interactive elements
• Secondary color: Supporting color for secondary actions and accents
• Tertiary color: Additional color for subtle elements and backgrounds

​

Interactive elements

• Accent color: Highlight color for special emphasis and calls-to-action
• Interactive color: Color for clickable elements and hover states
• Background color: Main background color for the widget interface
• Border color: Color for dividers, outlines, and structural elements

​

Color implementation

• Hex values: Each color displays its hex code for reference
• Live preview: Colors update in real-time as you make changes
• Accessibility: Ensure sufficient contrast between text and background colors

​

Logo customization

Add your brand identity to the widget:

​

Logo upload

• File formats: Support for .png, .jpeg images
• Size limit: Maximum 2MB file size
• Placement: Logo appears in the widget header or designated brand area
• Quality: Use high-resolution images for best results

​

Logo best practices

• Dimensions: Use appropriate aspect ratios that work well in the widget space
• Transparency: PNG files with transparent backgrounds work best
• Brand consistency: Use the same logo as your main application for familiarity

​

Launcher customization

Configure the floating widget launcher button:

​

Background color

• Launcher styling: Set the background color for the floating chat button
• Brand matching: Should complement your overall color scheme
• Visibility: Ensure the launcher stands out enough to be noticed

​

Icon selection

• Default option: Standard Pointer icon
• Custom icons: Upload your own icon or choose from available options
• Recognition: Use familiar help or chat icons for better user recognition

​

Real-time preview

The playground provides instant feedback on your customizations:

​

Live updates

• Immediate changes: See modifications as you make them
• Interactive testing: Click through the widget to test functionality
• Responsive preview: Check how the widget looks on different screen sizes

​

Testing workflow

1. Make adjustments: Use the various customization options
2. Preview changes: Interact with the widget preview in real-time
3. Iterate quickly: Fine-tune colors, text, and layout
4. Publish changes: Deploy your customized widget when satisfied

​

Best practices

​

Next steps