Getting started with widgets

Widget is an archive containing a set of files, which will connect to all accounts in amoCRM that have turned this widget on. Widget allows obtaining additional functionality, if necessary:

  • Displaying additional data in amoCRM interfaces. Special areas, where you can output information, are provided for widgets. For example, you can output contact accessing statistics from the internal system;
  • Interacting with a user, or with data entered by a user. You can enable JS-scripts in almost any system interface. For example, it is possible to show a pop-up card during incoming call;
  • Enabling amoCRM account administrator to enter individual settings for your service (for example, authorization key for your API).

In all other cases, you can simply use the opened amoCRM API.

First, we will try to create a fully operable widget example step-by-step and upload it to our account.

  1. Account registration
  2. Widget key generation
  3. Downloading widget archive with PHP-library and widget example
  4. Preparing structure
  5. Working with manifest.json
  6. Preparing localization files
  7. JS-script development
  8. Packing and uploading our archive

We will explore an option without the use of PHP-library, using JavaScript only. You can read about working with PHP in PHP-library section.

1. Account registration

You will have to create an account. If you already have an account, please, use caution during widget testing – don’t damage your data due to debugging. Perhaps you should create a separate account for beta-testing your widget.

After widget uploading, it will only be available in your account before our employees moderate it.

For my first widget, I will create an account with the following parameters:

PARAMETERVALUE
User email: email@amocrm.com
Account address: demoaccount.amocrm.com

2. Widget key generation

When you’re in the account, go to /settings/dev/. This is a developer’s page, and for me, its URL will look like https://demoaccount.amocrm.com/settings/dev/. Here, you can generate your first key, download widgets, and see the list of downloaded widgets.

Enter widget code (only lower case letters!). Widget code will not be visible to end-users (only inside the code as an identifier). In response, you will get a unique key for your widget, which will be used in future.

Here’s an example of what you will get:

PARAMETERVALUE
Code:new_widget
Key:57009cb5048a72191f25b01355c17d10dc349df20d4fe2ad0c69930223e13955

3. Downloading widget example.

You can always download the recent version at the developer’s page, or you can click on the link below.

Download

Next Step: Structure