Mikhail Filippov

Embedding Bitrix24 into a website using a widget and a CRM form

Bitrix24 developers are taking serious efforts to ensure that it is possible to provide informational exchange between Bitrix24 and different systems. We will look at how such informational exchange is possible with a corporate website and show how to set up leads using the B24+Website connection.

Let’s start.

We are going to use the cloud version of the Bitrix24 service and WordPress installation with default settings.

Your website can be built on any platform. We will just add to it the html code created by Bitrix24 at the end.

For demonstration purposes, we will use two test websites: one built on the Bitrix platform and another built on WordPress.

Test site on Bitrix platform:

Test site on WordPress:

Callback is a common element you have encountered on numerous websites. It looks like a receiver which vibrates or flashes to attract attention.

You can set up a similar element on your website using Bitrix24 without involving professional programmers.

The setup procedure includes three stages:

  • setting up a form called by the widget.

  • setting up the widget itself;

  • placing the widget on the website.

Setting up the form

Open the SRM forms section in Bitrix24.

In the window which opens you will see three preset forms: Callback, Feedback Form and Contact Details:

The next thing you need to do is to copy the form you need to embed.

You can see the brand new form you just copied from preset ones. Click the "edit button".

Now it is possible to edit the form. Change the name, heading and text in the form as shown below. We can also add a Name field from the Lead entity. To do this, open the Lead section and click the Name field:

The default color is blue. If it does not match with the color scheme of your website, you can choose a more suitable option in the Color field.

Do not forget to indicate the person responsible for the new lead and calling the client back in the Responsible Person field:

Open the More section. It contains a lot of useful settings for our form, which allow setting rules for lead field completion and setting metrics for advertising campaign evaluation by marketers:

After you have saved your new form, you will see it in the list. Do not forget to enable it:

Now you can place the form on any website page. To do this, click the Website Code button and copy the presented code to the required page. However, we do not need just a form on the website, but a receiver which will attract attention, i.e. a widget. Therefore, we need to go to the second stage.

Setting up the widget

Let us create a widget and attach our new callback form to it. To do this, go to CRM and select Website Widget in the menu.

This will open a window with a ready widget. It shows a few channels for incoming leads:

  • Open lines (for communication with clients on social networking sites);

  • Feedback form (to receive enquiries from clients);

  • Callback.

We need to create a widget only for ordering a callback. Select Create Widget:

Input the Order Call widget name. Disable the unnecessary channels – open line and CRM form, and select the Order Callback form. On the right of the window there are settings for the widget position, color and website page show time. Let us set up our widget on the website:

Let us save the widget. Now we have a set widget with the required form attached to it. Let us move on to the third stage – placing the widget on the website.

Placing on the website

To place the widget, it is just enough to add the script created by Bitrix24 to the html code of the page.

But we will consider how to place the widget on the website so that it appears on all pages. We will use a CMSBitrixFramework test site as an example. Click the Website Code button:

Press Copy to Buffer in the window which opens:

Then, we go to our test website and enter the administrative mode, where we consecutively select the Settings-Product Settings-Websites-Website Templates sections. Then, we select Change in the template being used:

We go to the very bottom of the template code and insert our script before the closing tag </body>:

Then, we save the changes made. As a result, all pages of the website have the new widget which attracts clients’ attention and allows them to order a free call on the website:

To perform the same action on WordPress, you need to follow path:

Here you need to choose your site's theme:

Open footer.php file, scroll down until you meed "/body" tag and paste the copied code right before it:

Now you can see the widget button on your site built on Bitrix platform:

And this is how it looks on site built on WordPress:

Clicking the widget will open the form we created:

The same form appears on WordPress site:

After its completion, Bitrix24 will show a new lead and the manager can call the interested client back:

We have considered a simple way of using a Bitrix24 form and widget on a website.

You can install this element on your own.

However, you may have to deal with more difficult tasks during actual operation. Our experts can implement any informational exchange schemes between Bitrix24 and websites and information systems of the customer.

We will be happy to help you.

  • 08.09.2018