Tools: Widgets, Packages & Integrations

The Tools panel gives you quick access to widgets, packages, and integrations – all the extras that enhance your website beyond what you build through chat.

Accessing Tools

Click the blocks icon next to the attachment button in the chat input area. The Tools panel opens with three organized tabs:

• Widgets – Pre-built components ready to add to your site
• Packages – JavaScript libraries for advanced functionality
• Integrations – Third-party services that connect via API keys

Widgets Tab

Widgets are pre-built components you can add to your website instantly. Instead of describing what you want, browse the available options and add them directly.

What you’ll find:

• UI components (buttons, cards, navigation elements)
• Interactive elements (carousels, accordions, tabs)
• Form components (contact forms, newsletter signups)
• Media elements (image galleries, video embeds)

How to use:

1. Browse the available widgets
2. Click any widget to preview it
3. Select one or multiple widgets you want
4. Click Add to insert them into your project

Sticklight adds the selected widgets to your site and you can customize them through chat or visual editing.

Packages Tab

Packages are JavaScript libraries that add advanced capabilities to your project. These are professional-grade tools used by developers worldwide.

Popular packages include:

• GSAP – Professional-grade animations and scroll effects
• Motion libraries – Smooth transitions and micro-interactions
• Utility libraries – Helper functions for common tasks

How to use:

1. Browse available packages
2. Click to see what each package offers
3. Select the packages you need
4. Click Add to install them

Once added, ask Sticklight to use the package in your project:

“Use GSAP to animate the hero section on scroll” “Add a smooth fade-in animation to the feature cards using the animation library”

Integrations Tab

Integrations connect your website to third-party services. These typically require an API key or account credentials.

Available integrations include:

• Google Analytics – Track visitor behavior and site performance
• Other analytics tools – Alternative tracking solutions
• Marketing tools – Connect your site to marketing platforms

How to use:

1. Select an integration
2. Enter your API key or credentials when prompted
3. Click Add to connect the service

Your API keys are stored securely and the integration is configured automatically.

Adding Multiple Items

The Tools panel supports multi-select – add several widgets, packages, or integrations in one action:

1. Click to select your first item (it gets highlighted)
2. Continue clicking to select additional items
3. All selected items show a checkmark
4. Click Add to insert everything at once

This saves time when setting up a new project or adding multiple related components.

Best Practices

Start with essentials:
Add core widgets and packages early in your project. It’s easier to build with these tools available from the start.

Don’t overload:
Only add packages you’ll actually use. Each package adds to your site’s load time.

Configure integrations early:
Set up analytics and tracking before you publish so you capture data from day one.

Combine with chat:
After adding widgets, use chat to customize them:

“Move the carousel to the testimonials section and set it to auto-advance every 5 seconds”

When to Use Tools vs. Chat

Use Tools when:

• You want a specific pre-built component
• You need a JavaScript library for advanced effects
• You’re connecting third-party services

Use chat when:

• You want something custom-built
• You’re describing a unique layout or design
• You need to modify or customize added widgets

Both approaches work together – add a widget through Tools, then refine it through chat and visual editing.