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

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. If absent, the block will remain as regular HTML code with `{{}}`
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!

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

PHP

BX24.js

PHP CRest

try
        {
        	const response = await $b24.callMethod(
        		'landing.repowidget.register',
        		data
        	);
        	
        	const result = response.getData().result;
        	
        	if (result.error())
        	{
        		console.error(result.error());
        		return;
        	}
        	
        	console.info(result);
        }
        catch( error )
        {
        	console.error('Error:', error);
        }

try {
            $response = $b24Service
                ->core
                ->call(
                    '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'     => [
                                    '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/vibe_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/vibe_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

Statuses and System Error Codes

HTTP Status: 20x, 40x, 50x

The errors described below may occur when calling any method.

Status	Code Error Message	Description
`500`	`INTERNAL_SERVER_ERROR` Internal server error	An internal server error has occurred, please contact the server administrator or Bitrix24 technical support
`500`	`ERROR_UNEXPECTED_ANSWER` Server returned an unexpected response	An internal server error has occurred, please contact the server administrator or Bitrix24 technical support
`503`	`QUERY_LIMIT_EXCEEDED` Too many requests	The request intensity limit has been exceeded
`405`	`ERROR_BATCH_METHOD_NOT_ALLOWED` Method is not allowed for batch usage	The current method is not allowed to be called using batch
`400`	`ERROR_BATCH_LENGTH_EXCEEDED` Max batch length exceeded	The maximum length of parameters passed to the batch method has been exceeded
`401`	`NO_AUTH_FOUND` Wrong authorization data	Invalid access token or webhook code
`400`	`INVALID_REQUEST` Https required	The methods must be called using the HTTPS protocol
`503`	`OVERLOAD_LIMIT` REST API is blocked due to overload	The REST API is blocked due to overload. This is a manual individual block, to remove it you need to contact Bitrix24 technical support
`403`	`ACCESS_DENIED` REST API is available only on commercial plans	The REST API is available only on commercial plans
`403`	`INVALID_CREDENTIALS` Invalid request credentials	The user whose access token or webhook was used to call the method lacks permissions
`404`	`ERROR_MANIFEST_IS_NOT_AVAILABLE` Manifest is not available	The manifest is not available
`403`	`insufficient_scope` The request requires higher privileges than provided by the webhook token	The request requires higher privileges than those provided by the webhook token
`401`	`expired_token` The access token provided has expired	The provided access token has expired
`403`	`user_access_error` The user does not have access to the application	The user does not have access to the application. This means that the application is installed, but the account administrator has allowed access to this application only for specific users
`500`	`PORTAL_DELETED` Portal was deleted	The public part of the site is closed. To open the public part of the site on an on-premise installation, disable the option "Temporary closure of the public part of the site". Path to the setting: Desktop > Settings > Product Settings > Module Settings > Main Module > Temporary closure of the public part of the site

Continue Learning

Vibe and Widgets

Remove Widget

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

Method ParametersMethod Parameters

Parameter fieldsParameter fields

Parameter WIDGET_PARAMSParameter WIDGET_PARAMS

Code ExamplesCode Examples

Response HandlingResponse Handling

Returned DataReturned Data

Error HandlingError Handling

Statuses and System Error CodesStatuses and System Error Codes

Continue LearningContinue Learning

Method Parameters

Parameter fields

Parameter WIDGET_PARAMS

Code Examples

Response Handling

Returned Data

Error Handling

Statuses and System Error Codes

Continue Learning