Add Widget to Start Page: the Vibe landing.repowidget.register

If you are developing integrations for Bitrix24 using AI tools (Codex, Claude Code, Cursor), connect to the MCP server so that the assistant can utilize the official REST documentation.

Scope: landing

Who can execute the method: any user

The method landing.repowidget.register adds a widget for the Start page: the Vibe. It returns an error or the ID of the added widget.

During the addition, a check is performed. If a widget with the code code has already been registered previously, its content will be updated. Widgets already placed on the Vibe will be automatically updated in case of content changes.

Method Parameters

Required parameters are marked with *

Name
type

Description

code*
string

Unique code for the widget. It is highly recommended to use a unique prefix for your widgets to avoid the risk of code conflicts with widgets from other developers

fields*
object

Field values for creating the widget

Parameter fields

Required parameters are marked with *

Name
type

Description

NAME*
string

Widget name

PREVIEW*
string

URL of the widget cover image for the widget selection slider

DESCRIPTION
string

Widget description

CONTENT*
string

Widget markup using Vue constructs

SECTIONS*
string

Code of the section where the widget will be added. List of available sections:

  • widgets_company_life — Company Life
  • widgets_new_employees — New Employees
  • widgets_team — Team
  • widgets_automation — Automation
  • widgets_events — Meetings and Events
  • widgets_profile — Employee Profile
  • widgets_tasks — Tasks and Projects
  • widgets_sales — Sales and Clients
  • widgets_hr — HR
  • widgets_other — Other
  • widgets_separators — Transitions and Separators
  • widgets_text — Text
  • widgets_image — Images
  • widgets_video — Video

WIDGET_PARAMS*
object

Parameters for the Vue templater. Without them, the method returns the REQUIRED_FIELD_NO_EXISTS error

ACTIVE
char

Widget activity. Accepts values:

  • Y - widget is active and available
  • N - widget is inactive and unavailable

SITE_TEMPLATE_ID
string

Binding the widget to a specific site template. Only for on-premise Bitrix24!

Parameter WIDGET_PARAMS

Required parameters are marked with *

Name
type

Description

rootNode*
string

Selector for the root element in the markup that will be turned into a Vue component. The root element must be the only element in the passed template; all other markup will be cleared

lang
string

Array of language phrases used in constructs {{$Bitrix.Loc.getMessage('W_EMPTY')}}

handler*
string

Address of the external handler to which requests will be sent.

Important: The handler must be accessible from the external network! Check the handler's availability with special services

style
string

Address of styles for the widget. Styles can also be set inline in the markup via the binding :style="{borderBottom: '1px solid red'}"

demoData*
object

Demo data for the widget that will be used to showcase the widget in the Vibe templates in Bitrix24 Marketplace.

If you are developing a widget for a specific Bitrix24 and do not plan to publish it in the Marketplace, you can specify any array as the parameter value; it will not be used anyway.

However, if you are preparing a mass-market solution with a widget, pay maximum attention to the demo data — they will be displayed in the preview slider of the Vibe template! Obviously, the structure of the demo data should match what your handler would return in normal widget usage

Code Examples

How to Use Examples in Documentation

// This snippet is an ES module: top-level await requires type="module" or a bundler.
        // $b24 is an already-initialized SDK instance (see the SDK "Get started" guide).
        import { Text } from '@bitrix24/b24jssdk'
        import type { B24Frame } from '@bitrix24/b24jssdk'
        
        declare const $b24: B24Frame
        
        const content = '<div class="my-app-w-container"><!-- Vue template --></div>'
        
        try {
          const response = await $b24.actions.v2.call.make<number>({
            method: 'landing.repowidget.register',
            params: {
              code: 'my_widget',
              fields: {
                NAME: 'My widget',
                PREVIEW: 'https://my-app.com/vibe_preview.jpg',
                CONTENT: content,
                SECTIONS: 'widgets_company_life',
                WIDGET_PARAMS: {
                  rootNode: '.my-app-w-container',
                  lang: {
                    ru: {
                      W_TITLE: 'People and their ages',
                      W_EMPTY: 'No data',
                    },
                    en: {
                      W_TITLE: 'People and their ages',
                      W_EMPTY: 'Empty',
                    },
                  },
                  handler: 'https://my-app.com/vibe.php',
                  style: 'https://my-app.com/vibe.css',
                  demoData: {
                    desc: 'Just a test widget',
                    count: 420,
                    persons: [
                      { name: 'Person 1', age: 21 },
                      { name: 'Person 2', age: 42 },
                      { name: 'Person 3', age: 123 },
                    ],
                  },
                },
              },
            },
            requestId: Text.getUuidRfc4122()
          })
        
          // The payload is available only on a successful response
          if (!response.isSuccess) {
            console.error(response.getErrorMessages().join('; '))
          } else {
            const result = response.getData()!.result
            console.info('Registered widget ID:', result)
          }
        } catch (error) {
          // Thrown on transport or SDK failures (AjaxError, SdkError, etc.)
          console.error(error)
        }
        
<!-- Load the SDK (UMD build); it is exposed as the global B24Js -->
        <script src="https://unpkg.com/@bitrix24/b24jssdk@1/dist/umd/index.min.js"></script>
        <script>
          async function registerVibeWidget() {
            try {
              // Initialize the SDK inside a Bitrix24 frame
              const $b24 = await B24Js.initializeB24Frame()
        
              const content = '<div class="my-app-w-container"><!-- Vue template --></div>'
        
              const response = await $b24.actions.v2.call.make({
                method: 'landing.repowidget.register',
                params: {
                  code: 'my_widget',
                  fields: {
                    NAME: 'My widget',
                    PREVIEW: 'https://my-app.com/vibe_preview.jpg',
                    CONTENT: content,
                    SECTIONS: 'widgets_company_life',
                    WIDGET_PARAMS: {
                      rootNode: '.my-app-w-container',
                      lang: {
                        ru: {
                          W_TITLE: 'People and their ages',
                          W_EMPTY: 'No data',
                        },
                        en: {
                          W_TITLE: 'People and their ages',
                          W_EMPTY: 'Empty',
                        },
                      },
                      handler: 'https://my-app.com/vibe.php',
                      style: 'https://my-app.com/vibe.css',
                      demoData: {
                        desc: 'Just a test widget',
                        count: 420,
                        persons: [
                          { name: 'Person 1', age: 21 },
                          { name: 'Person 2', age: 42 },
                          { name: 'Person 3', age: 123 },
                        ],
                      },
                    },
                  },
                },
                requestId: B24Js.Text.getUuidRfc4122()
              })
        
              // The payload is available only on a successful response
              if (!response.isSuccess) {
                console.error(response.getErrorMessages().join('; '))
                return
              }
        
              const result = response.getData().result
              console.info('Registered widget ID:', result)
            } catch (error) {
              // Thrown on transport or SDK failures (AjaxError, SdkError, etc.)
              console.error(error)
            }
          }
        
          document.addEventListener('DOMContentLoaded', registerVibeWidget)
        </script>
        
from b24pysdk.errors import BitrixAPIError, BitrixSDKException
        
        content = '<div class="my-app-w-container"><!-- Vue template --></div>'
        
        try:
            bitrix_response = client.landing.repowidget.register(
                code="my_widget",
                fields={
                    "NAME": "My widget",
                    "PREVIEW": "https://my-app.com/vibe_preview.jpg",
                    "CONTENT": content,
                    "SECTIONS": "widgets_company_life",
                    "WIDGET_PARAMS": {
                        "rootNode": ".my-app-w-container",
                        "lang": {
                            "ru": {
                                "W_TITLE": "People and their ages",
                                "W_EMPTY": "No data",
                            },
                            "en": {
                                "W_TITLE": "People and their ages",
                                "W_EMPTY": "Empty",
                            },
                        },
                        "handler": "https://my-app.com/vibe.php",
                        "style": "https://my-app.com/vibe.css",
                        "demoData": {
                            "desc": "Some people...",
                            "persons": [
                                {
                                    "name": "Person 1",
                                    "age": 21,
                                },
                                {
                                    "name": "Person 2",
                                    "age": 42,
                                },
                                {
                                    "name": "Person 3",
                                    "age": 123,
                                },
                            ],
                        },
                    },
                },
            ).response
            result = bitrix_response.result
            print(result)
        except BitrixAPIError as error:
            print(
                "Bitrix API error",
                f"error: {error.error}",
                f"error_description: {error.error_description}",
                sep="\n",
            )
        except BitrixSDKException as error:
            print(f"Bitrix SDK error: {error.message}")
        except Exception as error:
            print(f"Unexpected error: {error}")
        
try {
            $response = $b24Service
                ->core
                ->call(
                    'landing.repowidget.register',
                    [
                        'code'    => 'my_widget',
                        'fields'  => [
                            'NAME'         => 'My widget',
                            'PREVIEW'      => 'https://my-app.com/main_preview.jpg',
                            'CONTENT'      => $content,
                            'SECTIONS'     => 'widgets_company_life',
                            'WIDGET_PARAMS' => [
                                'rootNode' => '.my-app-w-container',
                                'lang'     => [
                                    'de' => [
                                        'W_TITLE' => 'People and their ages',
                                        'W_EMPTY' => 'Empty',
                                    ],
                                    'en' => [
                                        'W_TITLE' => 'People and their ages',
                                        'W_EMPTY' => 'Empty',
                                    },
                                ],
                                'handler'   => 'https://my-app.com/vibe.php',
                                'style'     => 'https://my-app.com/vibe.css',
                                'demoData'  => [
                                    'desc'    => 'Just a test widget',
                                    'count'   => 420,
                                    'persons' => [
                                        ['name' => 'Person 1', 'age' => 21],
                                        ['name' => 'Person 2', 'age' => 42],
                                        ['name' => 'Person 3', 'age' => 123],
                                    ],
                                ],
                            ],
                        ],
                    ]
                );
        
            $result = $response
                ->getResponseData()
                ->getResult();
        
            echo 'Success: ' . print_r($result, true);
            // Your required data processing logic
            processData($result);
        
        } catch (Throwable $e) {
            error_log($e->getMessage());
            echo 'Error registering repowidget: ' . $e->getMessage();
        }
        
const content = `
            <div class="my-app-w-container">
                <h2 class="w-title" :style="{borderBottom: '1px solid red'}">
                    {{$Bitrix.Loc.getMessage('W_TITLE')}}
                </h2>
                
                <h3>Description: {{desc}}</h3>
                
                <div v-for="(value) in persons">
                    <p>
                        <span class="w-name">{{value.name}}</span>:
                        <span class="w-age">{{value.age}}</span>
                    </p>
                </div>
                
                <div v-if="persons == null">
                    {{$Bitrix.Loc.getMessage('W_EMPTY')}}
                </div>
                
                <h4>Just a number {{count}}</h4>
                
                <div class="w-buttons">
                    <button @click="fetch">Get data (without parameters)</button>
                    <button @click="fetch({param: 'a'})">Data for parameter 'a'</button>
                    <button @click="fetch({param: 'b'})">Data for parameter 'b'</button>
                    <button @click="openApplication({param1: '1', param2: 'false'})">Open application</button>
                    <button @click="openPath('/crm')">Open local address in slider</button>
                </div>
            </div>
        `;
        
        const data = {
            code: 'my_widget',
            fields: {
                NAME: 'My widget',
                PREVIEW: 'https://my-app.com/main_preview.jpg',
                CONTENT: content,
                SECTIONS: 'widgets_company_life',
                WIDGET_PARAMS: {
                    rootNode: '.my-app-w-container',
                    lang: {
                        de: {
                            W_TITLE: 'People and their ages',
                            W_EMPTY: 'Empty',
                        },
                        en: {
                            W_TITLE: 'People and their ages',
                            W_EMPTY: 'Empty',
                        },
                    },
                    handler: 'https://my-app.com/vibe.php',
                    style: 'https://my-app.com/vibe.css',
                    demoData: {
                        desc: 'Just a test widget',
                        count: 420,
                        persons: [
                            {'name': 'Person 1', 'age': 21},
                            {'name': 'Person 2', 'age': 42},
                            {'name': 'Person 3', 'age': 123},
                        ],
                    },
                },
            },
        };
        
        BX24.callMethod(
            'landing.repowidget.register',
            data,
            (result) =>
            {
                if (result.error())
                {
                    console.error(result.error());
        
                    return;
                }
        
                console.info(result.data());
            },
        );
        
require_once('crest.php');
        
        $content = <<<'HTML'
            <div class="my-app-w-container">
                <h2 class="w-title" :style="{borderBottom: '1px solid red'}">
                    {{$Bitrix.Loc.getMessage('W_TITLE')}}
                </h2>
                
                <h3>Description: {{desc}}</h3>
                
                <div v-for="(value) in persons">
                    <p>
                        <span class="w-name">{{value.name}}</span>: 
                        <span class="w-age">{{value.age}}</span>
                    </p>
                </div>
                
                <div v-if="persons == null">
                    {{$Bitrix.Loc.getMessage('W_EMPTY')}}
                </div>
                
                <h4>Just a number {{count}}</h4>
                
                <div class="w-buttons">
                    <button @click="fetch">Get data (without parameters)</button>
                    <button @click="fetch({param: 'a'})">Data for parameter 'a'</button>
                    <button @click="fetch({param: 'b'})">Data for parameter 'b'</button>
                    <button @click="openApplication({param1: '1', param2: 'false'})">Open application</button>
                    <button @click="openPath('/crm')">Open local address in slider</button>
                </div>
            </div>
        HTML;
        
        $data = [
            'code' => 'my_widget',
            'fields' => [
                'NAME' => 'My widget', 
                'PREVIEW' => 'https://my-app.com/main_preview.jpg', 
                'CONTENT' => $content,  // Vue markup extracted into a separate variable for convenience
                'SECTIONS' => 'widgets_company_life', 
                'WIDGET_PARAMS' => [
                    'rootNode' => '.my-app-w-container',
                    'lang' => [
                        'de' => [
                            'W_TITLE' => 'People and their ages',
                            'W_EMPTY' => 'Empty!',
                        ],
                        'en' => [
                            'W_TITLE' => 'People and their ages',
                            'W_EMPTY' => 'Empty!',
                        ],
                    ],
                    'handler' => 'https://my-app.com/vibe.php',
                    'style' => 'https://my-app.com/vibe.css',
                    'demoData' => [
                        'desc' => 'Just a test widget',
                        'count' => 420,
                        'persons' => [
                            [
                                'name' => 'Person 1',
                                'age' => 21,
                            ],
                            [
                                'name' => 'Person 2',
                                'age' => 42,
                            ],
                            [
                                'name' => 'Person 3',
                                'age' => 123,
                            ],
                        ],
                    ],
                ],
            ],
        ];
        
        $result = CRest::call(
            'landing.repowidget.register',
            $data
        );
        
        echo '<PRE>';
        print_r($result);
        echo '</PRE>';

Response Handling

HTTP status: 200

{
            "result": 10,
            "time": {
                "start": 1713949410.036288,
                "finish": 1713949411.632775,
                "duration": 1.596487045288086,
                "processing": 0.6458539962768555,
                "date_start": "2024-04-24T11:03:30+02:00",
                "date_finish": "2024-04-24T11:03:31+02:00",
                "operating": 0
            }
        }

Returned Data

Name
type

Description

result
integer

Identifier of the added widget

time
time

Information about the request execution time

Error Handling

HTTP status: 400

{
            "error":"REQUIRED_FIELD_NO_EXISTS",
            "error_description":"The required field is missing: CONTENT"
        }

Name
type

Description

error
string

String error code. It consists of digits, Latin letters, and underscores. It may arrive empty — in that case only error_description shows the reason

error_description
string

Error message for the developer. Do not show it to the end user without processing

Possible Error Codes

Code

Description

REQUIRED_FIELD_NO_EXISTS

A required field is not passed in the fields parameter: NAME, PREVIEW, CONTENT, SECTIONS, or WIDGET_PARAMS. The field name is substituted into the error text

REQUIRED_PARAM_NO_EXISTS

A required parameter is not passed in the WIDGET_PARAMS parameter: rootNode, handler, or demoData. The parameter name is substituted into the error text

Statuses and System Error Codes

HTTP Status: 4xx, 5xx

The errors described below are returned by the REST API itself, not by the logic of a specific method. They can arrive in response to any method.

Status

Code
Error Message

Description

500

INTERNAL_SERVER_ERROR
Internal server error

An internal server error has occurred. Retry the call, and if the error persists, contact the server administrator or Bitrix24 technical support

500

ERROR_UNEXPECTED_ANSWER
Server returned an unexpected response

The server returned an unexpected response. Retry the call, and if the error persists, contact the server administrator or Bitrix24 technical support

503

QUERY_LIMIT_EXCEEDED
Too many requests

The request intensity limit has been exceeded

429

OPERATION_TIME_LIMIT
Method is blocked due to operation time limit

The method is blocked because the request resource intensity limit has been exceeded. The block is lifted automatically once the accumulated execution time of the method no longer exceeds the limit

401

NO_AUTH_FOUND
Wrong authorization data

The request contains no authorization data: neither an access token nor a webhook code was passed

401

INVALID_REQUEST
Https required

Methods are called over the HTTPS protocol only

401

OVERLOAD_LIMIT
REST API is blocked due to overload

The REST API is blocked due to overload. This is a manual individual block. To have it lifted, contact Bitrix24 technical support

401

ACCESS_DENIED
REST is available only on commercial plans

The REST API is available only on commercial plans. A webhook receives a different error message — REST is available only by subscription

401

INVALID_CREDENTIALS
Invalid request credentials

No active webhook with the specified user identifier and secret code was found

404

ERROR_METHOD_NOT_FOUND
Method not found!

No method with this name was found. The name is misspelled, the method does not exist in the REST API, or it is unavailable without the required scope

401

insufficient_scope
The request requires higher privileges than provided by the webhook token

The request requires broader permissions than the token has: for a webhook these are the permissions granted to it, for an application it is the scope. For an application, the error message ends with provided by the access token

401

expired_token
The access token provided has expired

The access token has expired

401

user_access_error
The user does not have access to the application

The application is installed, but the Bitrix24 administrator has granted access to it only to specific users

403

PORTAL_DELETED
Portal was deleted

The public part of the site is closed. To open it on an on-premise installation, disable the "Temporary closure of the public part of the site" option. Path to the setting: Desktop > Settings > Product Settings > Module Settings > Main Module > Temporary closure of the public part of the site

Continue Learning

Previous
Overview of Methods
Next
Remove Widget