Skip to main content

Start Building Your Custom Widgets

Learn how to create custom widgets from scratch using the Widget Builder.

Create a Custom Widget​

Set up your custom widget in a few simple steps by following the instructions below creating a simple "Hello World" widget from scratch.

Steps to create a Custom Widget​

  1. Create a New Widget​

    Go to Custom Widgets using the right sidebar navigation and click on the New Custom Widget button.

  2. Fill out general information​

    Enter the name of your widget using the title field and select an icon for your widget.

     Hello World

    Hello World Icon

  3. Add a simple layout​

    Skip all the other options and go directly to the layout editor by selecting the Layout tab. In the layout editor, add a simple HTML structure with a div element containing the text "Hello World".

    <div>Hello World</div>

  4. Save your widget​

    Make sure you have enabled the Available in Staffbase toggle in the General tab to make your widget available in the Staffbase platform. Then click on the Save button to create your very first Custom Widget.

    info

    If you want to just save your current progress and continue working on it later without making it available in the Staffbase platform, you can disable the Available in Staffbase toggle.
    Also if you want to test your widget, you do not have to always remove the widget in the Staffbase platform. You can just disable the Available in Staffbase toggle in the Widget Builder and it will not be visible in Staffbase.

  5. Publish your widget​

    After saving your widget, go to your Staffbase App and add your newly created widget to a page to see it in action.

    On the Staffbase App, go to to a page of your choice and click on the Edit button. In the Page content editor, click on the + / Add Widget button and select your widget from the list of available widgets.

    That's it! You have successfully created your first custom widget using the Widget Builder.