Skip to main content

Custom Widgets

Widget Creation and Management Guide​

This guide explains the necessary steps for creating and managing widgets. Follow the steps below to create and manage your widgets effectively.

1. Preparing HTML and CSS Code​

Start by writing the basic HTML and CSS code for the widget you want to create.

2. Accessing the Admin Panel​

Navigate to Design > Advanced in the serB2B admin panel.

3. Accessing the Custom Add-ons Section​

Click on the Custom Widgets section under the Design tab in the menu.

4. Adding a New Widget​

Click on the "+" button in the top-right corner to open the widget creation screen.

5. Entering Widget Information​

  • Fill in the required input fields.
  • The Icon Input field is configured to use Bootstrap Icons, which will determine the icon displayed for the widget in the serBuilder page.

6. Adding Code​

  • Paste the previously prepared HTML and CSS code into the specified code blocks.
  • Click Save to add the desired attributes.

7. Adding Attributes​

  • Switch to the Attributes tab and click the "+" button in the top-right corner.
  • Fill in the input fields according to the attributes you want to create.

8. Attribute Integration with Twig Template​

  • Open the Twig Template file for manual edits needed for the widget area.
  • Add the attribute’s key name to the Twig Template in the following format:
{{ widget.(attribute's key name value) }}

9. Saving and Making the Widget Ready for Use​

  • Once all changes are saved, the widget will appear in the Widget Repos section of the serBuilder page.
  • It will be ready for use with the drag-and-drop method.

Example Display

Frequently Asked Questions (FAQ)​

  • How can I make the widget visible in serBuilder?

    Once the widget’s HTML, CSS code, and attributes definitions are completed and saved, it will appear in the Widget Repos section of the serBuilder page.

  • What is Twig Template and how is it used?

    Twig Template is a framework used for attribute integration of widgets. The key name of the attribute is added to the Twig Template as follows:

    {{ widget.(attribute's key name value) }}

Contact and Support​

If you encounter any issues or need assistance, feel free to contact our support team. We’ll be happy to assist you as soon as possible.