Local widget embedding

Bitrix24 affords you the luxury of adding custom user interfaces to special embedded locations, such as client bookmarks or task cards, timeline buttons, drop-down menu items, and others.

Let us illustrate by adding a custom interface in the form of a tab within the CRM Contact Card.

Open the "Add a Widget" section and select the "Show custom info in CRM information pane" template.

Download the example from the tutorial and upload it to the server as before. It is essential to have knowledge of the URL where the files will be available.

In the downloaded example, we added a file named "placement.php" that contains the layout and logic of the work, along with the existing files of our SDK.

"Widgets" block

In the Bitrix24 interface, you will find an incoming webhook, which we will use to retrieve data about the current contact. However, our focus will be on the "Widgets" block.

Name your widget, as it will be the name of the tab in the contact form.

Specify the "Widget handler URL" field, which Bitrix24 will use to display our interface in a frame.

We have set the specific embedded area of the widget, but other options are available, as the same handler can be utilized in multiple places.

The example key functionality lies in the "placement.php" file. When displayed in a frame within Bitrix24, it receives a POST request with the data about where the widget is displayed. Let's output the content of this request using "print_r".

The example includes a layout with a table, populated with the data of the current contact. To retrieve this data, we simply call the REST method "crm.contact.get", substituting the contact ID obtained from "PLACEMENT_OPTIONS" in the method parameters.

Returning to the Bitrix24 interface, navigate to CRM, contacts, and open any available contact. The form should display a "Widget Example" tab.

Upon visiting the tab, our widget will be embedded in a frame and display the content of the POST request we output for debugging with "print_r", as well as how easily we obtained and output the desired data.

In practice, this example can be extended to create a user interface, capable of passing data to an external system, modifying contact data, returning changed data back to Bitrix24, and much more.