Skip to main content

Widget Builder Documentation

Welcome to the Widget Builder documentation. Learn how to create and manage custom widgets for your Staffbase intranet.

Introduction​

The Widget Builder allows you to quickly and easily create widgets tailored to your needs. With a user-friendly interface and extensive customization options, you can effectively enhance your communications platform.

How Does the Widget Builder Work?​

Getting Started with the Widget Builder​

Conveniently log in to the Widget Builder with your existing Staffbase account.

Managing Widgets​

The widget catalog displays all published and inactive widgets. Here you can:

  • Create new widgets
  • Edit existing widgets
  • Publish widgets or switch them to draft mode

Key Features​

  • Flexible Layouts
    Create and customize layouts using HTML, Handlebars, and Tailwind CSS.
  • Adaptable Templates
    Choose from various templates and customize them to your needs.
  • Real-Time Preview
    See your changes instantly in a live preview.
  • Integration
    Seamless integration with various platforms and frameworks.
  • Export Options
    Export your widgets in different formats such as HTML, CSS, and JavaScript.

Start Here​

New to the Widget Builder? Follow this learning path to get up and running:

Recommended reading order
  1. Initial Setup — Connect the Widget Builder to your Staffbase platform
  2. Getting Started — Discover the Widget Builder in less than 5 minutes
  3. Interface Overview — Visual guide to every screen in the application
  4. Create a Custom Widget — Build your first "Hello World" widget
  5. Widget Settings Fields — Add configurable fields to your widget
  6. Layout: HTML and Handlebars — Design your widget's appearance
  7. Create an API Request — Connect your widget to external data
  8. Tailwind CSS — Style your widget with utility classes
  9. Advanced Topics — API proxy, variables, translations, and more

Quick Start Guide​

  1. Accessing the Widget Builder
    Open the Widget Builder through your dashboard or directly via the URL: https://app.widgetbuilder.de/.
  2. Selecting a Template
    Choose a suitable template to start your widget.
  3. Customizing the Widget
    Use HTML, Handlebars, and Tailwind CSS to edit and customize layouts.
  4. Save and Publish
    Save your work and publish the widget for Staffbase Studio.