Developers » VK Mini Apps
VK Mini Apps � Documentation
VK Mini Apps � Getting Started
����1. App Registration
����2. Quick Start
����3. VK UI Package
����4. VK Connect
4.1 VK Connect Package
4.2 VK Connect Promise
��������4.3 VK Connect Errors Handling
����5. Notifications Sending
    6. Launch Parameters

VK Connect Events
����1. VK Connect Initializing
����2. Obtaining Profile Data
����3. Obtaining Phone Number
����4. Obtaining E-Mail
����5. Obtaining Location
����6. User Authorization
����7. API Methods Calling
����8. Share Dialog
����9. Publication on Wall
����10. Obtaining Client Version
����11. VK Pay Payment
����12. Enabling Notifications
����13. Disabling Notifications
����14. Hash Setting
����15. Community Messages Subscribing
����16. Community Joining
����17. QR Scanning
����18. App Opening
    19. Changing Client External Appearance
    20. App Window Scrolling
����21. Changing App Window Size

VK Mini Apps is VK platform for mobile services. It allows to create apps looking excellent and working quickly.

VK Mini Apps Starter Set includes 3 React packages:
If you have never used React before, we recommend to start with this manual.
1. App Registration
Create an app: https://vk.com/apps?act=manage.

Choose "Embedded application", type "VK App", set the title and submit your action.

You will need "Application ID" field value in a further work (API_ID, app_id or client_id in the documentation).
2. Quick Start
Use this command to create VK Mini Apps template:
npx @vkontakte/create-vk-app <folder name>

It has everything you need to start working on your first application. VK UI, VK Connect and VK Icons packages are connected and prepared for using.
3. VK UI Package
With VK UI one can create attractive mobile service interface.

Manual: https://vkcom.github.io/vkui-styleguide/
NPM: https://www.npmjs.com/package/@vkontakte/vkui

Create new application:
npx create-react-app my-app

Install VK UI:
npm install @vkontakte/vkui || yarn add @vkontakte/vkui

Run your application:
npm start

You can work with VK UI components now.
Note that most of the screen space is available for your application. For the correct navigation you need:
  • use PanelHeader component on each scrren of your app. It should contain app title and "Back" icon on screens where it is needed.
  • don't occupy right upper corner of PanelHeader. This area is reserved for the native bar with "Menu" and "Close" buttons which is shown all the time.
  • use platform-depending "Back" icon. VK Icons package components should be used:
    • Android � Icon24Back (@vkontakte/icons/dist/24/back);
    • iOS � Icon28ChevronBack (@vkontakte/icons/dist/28/chevron_back).

On the Android devices "Back" button tap triggers history.back event in webview (see documentation). By the tap on this button official client returns on previous page of your app or closes it if it's impossible to return.

For the correct workflow of your app use following viewport attributes:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover">


��������� � viewport.
4.1 VK Connect
Full list of VK Connect events can be found here.
If you have not worked with VK API before, we recommend to read this manual firstly.
4.1 VK Connect Package
VK Connect is a package for sending and receiving events in your application. Vk Connect allows to use VK API and user device's APIs.

NPM: https://www.npmjs.com/package/@vkontakte/vkui-connect

Install the package:
npm install @vkontakte/vkui-connect || yarn add @vkontakte/vkui-connect

Initialize VK Connect in index.js:
import * as connect from '@vkontakte/vkui-connect';

Then you work with connect object methods:
// send event to official client
connect.send("VKWebAppInit", {});
 // subscribe for events from official client
connect.subscribe((e) => console.log(e));
// check event's availability

Full list of VK Connect events can be found here.
4.2 VK Connect Promise
VK Connect Promise is a package for sending and receiving events on promises in your application. Vk Connect Promise allows to use VK API and user device's APIs.

NPM: https://www.npmjs.com/package/@vkontakte/vkui-connect-promise

Install the package:
npm install @vkontakte/vkui-connect-promise || yarn add @vkontakte/vkui-connect-promise

Initialize VK Connect in index.js:
import * as connect from '@vkontakte/vkui-connect-promise';

Then you work with connect object methods:
// send event to official client
connect.send('VKWebAppInit', {})
  .then(data => handleResponse(data))
  .catch(error => handleError(error));

4.3 VK Connect Errors Handling
Errors can be returned while you are working with VK Connect. data object will contain two fields:
{
  "type": "EventNameFailed",
  "data": {
    "error_type": String
    "error_data": {}
  }
}

data object structure
error_type
string
error type. Possible values:
  • client_error � client errors;
  • api_error � API errors;
  • auth_error � authorization errors.
error_data
object
additional data, depends on error_type. See description below.

error_type = "client_error"
These are errors caused by incorrect syntax in VK Connect events.
error_data object structure
error_code
integer
error code. See possible values list in the table below.
error_reason
string
error description.
error_description
string
detailed description (optional).

Error codes for error_type = "client_error"
error_codeerror_reason
1Unknown error
2Missing required params
3Connection lost
4User denied
5Invalid params

error_type = "api_error"
These are errors listed on this page or in the API method's description.
error_data object structrure
error_code
integer
error code.
error_msg
string
error description.
request_params
array
API call params.

error_type = "auth_error"
These are errors to be returned while proceeding authorization.
error_data object structure
error
integer
error code.
error_reason
string
error description.
error_description
array
detailed description (optional).
5. Notifications Sending
VK Mini Apps can send notifications about any events. User will receive push and in-app notification.

Use notifications.sendMessage method with service access_token to send notifications.

Note that you cannot send more than 2 notifications per hour (10 per day). Your app should be installed by user.


Before sending you should check if it is available. Use apps.isNotificationsAllowed method with a service access token.

To enable or disable notifications from the app use VK Connect events VKWebAppAllowNotifications and VKWebAppDenyNotifications. A user can manage notifications from the settings in official app so it's crucial to check availability even if the user didn't disable notifications from you app directly.

Next

By continuing to browse, you consent to our use of cookies. You can read our Cookie Policy here.