How to Configure Phone Input Country Priority

Prerequisites

Access to your widget initialization code
Knowledge of ISO 3166-1 alpha-2 country codes

Steps

1. Add the configuration to your init call

Pass COUNTRY_CODES_PRIORITY in the projectConfigs array:

ClaspoEditor.init({
  api: {
    getWidgetData: () => Promise.resolve({
      ...,
      projectConfigs: [
        {
          id: 'COUNTRY_CODES_PRIORITY',
          value: JSON.stringify({
            includedList: ['PT', 'ES', 'FR'],
            allowToAddOnlyFromIncludedList: false,
          }),
        },
      ],
    }),
  }
});

2. Configure the options

Property	Type	Description
`includedList`	`string[]`	Country codes in priority order. First code becomes the default.
`allowToAddOnlyFromIncludedList`	`boolean`	`true` restricts selection to listed countries only.

3. Verify the result

Add a new phone input component in the editor. The first country in your includedList appears as the default.

Example

US-first with Canada and UK priority:

{
  includedList: ["US", "CA", "GB"],
  allowToAddOnlyFromIncludedList: false
}

United States appears as default. Canada and United Kingdom appear at the top of the dropdown. All countries remain available.

Country Codes Reference

Code	Country
US	United States
CA	Canada
GB	United Kingdom
DE	Germany
FR	France
UA	Ukraine
PL	Poland

Full list: ISO 3166-1 alpha-2

Troubleshooting

Wrong default country appears

Check the first code in includedList
Confirm config ID is exactly COUNTRY_CODES_PRIORITY
Add a new phone input (existing components keep their settings)

Restriction not working

Set allowToAddOnlyFromIncludedList to true (boolean, not string)
Validate JSON syntax