---
metadata:
- name: generator
content: Diplodoc Platform v5.44.0
alternate:
- https://yandex.com/dev/id/doc/en/suggest/script-sdk-suggest.md
- https://yandex.com/dev/id/doc/ru/suggest/script-sdk-suggest.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/id/doc/en/llms.txt
# Set up the sdk-suggest.js script for the authorization page
Enable one of the script versions on the user authorization page:
{% list tabs %}
- Version with polyfills (recommended)
```html
```
See also:
* [Polyfills](https://en.wikipedia.org/wiki/Polyfill_(programming))
- Basic version
```html
```
{% endlist %}
## Syntax and parameters {#sdk-suggest-syntax}
```javascript
YaAuthSuggest.init(oauthQueryParams, tokenPageOrigin, [suggestParams])
```
{% note warning %}
The `suggestParams` group of parameters is only applicable to the button. When using the widget, don't specify those parameters.
{% endnote %}
A call example:
{% list tabs %}
- For the instant login widget
```javascript
YaAuthSuggest.init(
{
client_id: 'c46f0c53093440c39f12eff95a9f2f93',
response_type: 'token',
redirect_uri: 'https://examplesite.com/suggest/token'
},
'https://examplesite.com'
)
.then(({
handler
}) => handler())
.then(data => console.log('Message with a token', data))
.catch(error => console.log('Error handling', error));
```
- For the login button
```javascript
YaAuthSuggest.init(
{
client_id: 'c46f0c53093440c39f12eff95a9f2f93',
response_type: 'token',
redirect_uri: 'https://examplesite.com/suggest/token'
},
'https://examplesite.com',{
view: 'button',
parentId: 'container',
buttonView: 'main',
buttonTheme: 'light',
buttonSize: 'm',
buttonBorderRadius: 0
}
)
.then(({
handler
}) => handler())
.then(data => console.log('Message with a token', data))
.catch(error => console.log('Error handling', error));
```
{% endlist %}
See also [Example of usage on an HTML page](#example)
Parameter descriptions:
#|
|| **Parameter** | **Required** | **Type** | **Description** | **_oauthQueryParams_** contains query parameters that are used when opening the OAuth authorization page (see the full list of [query parameters](https://yandex.com/dev/id/doc/en/codes/code-url.md#code)). |
||
|| `client_id` | Yes | `string` | The OAuth app ID received after [registration](https://yandex.com/dev/id/doc/en/register-client.md). ||
|| `response_type` | Yes | `string` | The request type. ||
|| `redirect_uri` | No | `string` | The URL of the callback page that receives the token. Must match the address you entered in the **Redirect URI** field for the OAuth app with this `client_id`. This URL is used for passing the authorization result. If you haven't specified this parameter, the first value from the **Redirect URI** field is used. | **_tokenPageOrigin_** is a parameter that enables the authorization page to communicate with the callback page via `postMessage`. |
||
|| Only the parameter value is specified. | Yes | `string` | "Origin" of the callback page that receives the token. This parameter can't be unspecified or contain the `*` symbol. | **_suggestParams_** contains parameters that determine the button's appearance. They're only specified when the authorization component is a button. They don't apply to a widget. There is a [button generator](#buttons-constructor) to help you tweak the parameter values. |
||
|| `view` | Yes | `string` | Parameter for displaying the `button` with the button value. ||
|| `parentId` | No | `string` | The `id` attribute of the container where the button will be embedded. If no `ID` is found, the button fills the `body`. ||
|| `buttonView` | No | `string` | The button type. By default — `main`. Possible values:
* `main` is the primary black button with a Yandex brand icon and text. The button turns white when its theme (`buttonTheme`) is switched to the dark one.
* `additional` is an alternative button with a border. Unlike the primary button, what contrasts with the theme is the border, not the button background.
* `icon` is a square icon button with a Yandex brand icon on a red background. You can change the border radius for rounded corners.
* `iconBG` is a square icon button with a Yandex brand icon (the letter "Y" in a red circle) that has a gray background and a gray border. You can change the background color, border width and color, and border radius. ||
|| `buttonTheme` | No | `string` | Button theme. To avoid the button blending into the background, change this parameter when your website page's or app's theme changes. By default — `light`. Possible values:
* `light` is the light theme.
* `dark` is the dark theme. ||
|| `buttonSize` | No | `string` | The button size that determines its height, width, and switching to the minimized or maximized appearances. By default: `m`. Possible values:
* `xs` \| `s` \| `m` \| `l` \| `xl` \| `xxl` ||
|| `buttonBorderRadius` | No | `number` | The button's border radius (the value of the `border-radius` CSS property in px). By default — 0 ||
|| `buttonIcon` | No | `string` | The language of the logo on the button. The default value is `ya`. Possible values:
* `ya` for the Russian version.
* `yaEng` for the English version. ||
|| `customBgColor` | No | `string` | The background color of the icon button. Can be specified in any format supported by CSS. This parameter is only applicable to the `iconBG` button. ||
|| `customBgHoveredColor` | No | `string` | The background color of the icon button on hover. Can be specified in any format supported by CSS. This parameter is only applicable to the `iconBG` button. ||
|| `customBorderColor` | No | `string` | The border color of the icon button. Can be specified in any format supported by CSS. This parameter is only applicable to the `iconBG` button. ||
|| `customBorderHoveredColor` | No | `string` | The border color of the icon button on hover. Can be specified in any format supported by CSS. This parameter is only applicable to the `iconBG` button. ||
|| `customBorderWidth` | No | `number` | The border width of the icon button. This parameter is only applicable to the `iconBG` button. ||
|#
### Button generator {#buttons-constructor}
Select parameter values that suit your needs. The generator will render the button and produce the code with the same parameters.
Copy the generated code and paste it into the page. In the code, substitute:
* `oauthQueryParams` with the strings below.
```javascript
{
client_id: 'c46f0c53093440c39f12eff95a9f2f93',
response_type: 'token',
redirect_uri: 'https://examplesite.com/suggest/token'
}
```
Use the following parameter values in these strings:
* For `client_id` — the ID of the OAuth app registered in [Step 1](https://yandex.com/dev/id/doc/en/register-client.md).
* For `redirect_uri` — the URL of the callback page you entered in the **Redirect URI** field for the OAuth app that has this `client_id` (if you don't specify any URL, the first value from the **Redirect URI** field will be used).
* `tokenPageOrigin` with the "origin" of the callback page that receives the token.
## Return value {#sdk-suggest-return-value}
{% list tabs %}
- Succesful response
```javascript
{
status: 'ok',
handler: handler,
}
```
- Error
```javascript
{
status: 'error',
code: '...'
}
```
{% endlist %}
Response parameters:
#|
|| **Parameter** | **Description** ||
|| `status` | Response status:
* `ok`: Success;
* `error`: Ends in an error. ||
|| `handler` | The function that returns a Promise as an iframe with the login button or widget when `status=ok`. ||
|| `code` | The error code when `status=error`. ||
|#
## Example of usage on an HTML page {#example}
An instant login widget or a login button is added to the page:
* To add a login button, use the whole code below.
* To add a widget, use the code below after excluding the additional `suggestParams` parameters that determine the login button's appearance.
```html
```