{"id":81091,"date":"2024-10-06T09:02:14","date_gmt":"2024-10-06T09:02:14","guid":{"rendered":"https:\/\/sales-ai-agents.com\/?post_type=docs&p=81091"},"modified":"2024-10-06T09:02:17","modified_gmt":"2024-10-06T09:02:17","password":"","slug":"custom-widget-quick-guide","status":"publish","type":"docs","link":"https:\/\/sales-ai-agents.com\/de\/guides\/client-portal\/custom-widget-quick-guide\/","title":{"rendered":"Custom Widget – Quick Guide"},"content":{"rendered":"\n

Using the Custom Widget, you can design a custom block of any complexity on the portal. These widgets are ideal if the ready-made widgets are limited for your case. Let\u2019s try to add and set up a custom widget.<\/p>\n\n\n\n

Adding a Widget to a Portal Page<\/strong><\/h2>\n\n\n\n

1) Open the page where you want to add a custom widget. Click on the „Add Block“ button on the left sidebar. Scroll down the list of blocks and select „Custom widget“.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2) The widget settings consist of several sections:<\/p>\n\n\n\n

    \n
  • General<\/strong> \u2013 Here you can change the widget’s name.<\/li>\n\n\n\n
  • Content<\/strong> \u2013 Here you can manage the widget\u2019s blocks.<\/li>\n\n\n\n
  • Wrapper and Layout<\/strong> \u2013 Controls the appearance of the widget.<\/li>\n\n\n\n
  • Block Info<\/strong> \u2013 Technical information about the widget.<\/li>\n<\/ul>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Edit the title of the widget<\/h2>\n\n\n\n

    Click on the title field in the „General“ section of the widget settings. Type in the desired title for your widget.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Adding and Editing Blocks<\/strong><\/p>\n\n\n\n

    Each Custom Widget is made up of blocks (text, image, rating, etc.). To add a new block, click on Add block<\/strong> and select the desired block from the list.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    After adding a block, you can edit its content, for example, change the text and its formatting in a text block.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Or, for instance, replace the image in an image block.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Deleting or Hiding a Block<\/strong><\/p>\n\n\n\n

    If you want to temporarily hide a block, you can do so through the block’s menu. You can also delete an unnecessary block using the same menu.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Moving Blocks<\/strong><\/p>\n\n\n\n

    You can move blocks using drag-and-drop (DND). Click on the icon next to the desired block and drag it to the needed position.<\/p>\n\n\n\n