npm package: @scaleflex/widget-canva
Description: Create your own design & customize it then upload it through the widget on the go.
Latest version: 4.8.13

# @scaleflex/widget-canva

[![Plugins][plugins-image]](#plugins)
[![Website][filerobot-image]][sfx-url]
[![Version][filerobot-version]][version-url]
[![Scaleflex team][made-by-image]][sfx-url]
[![License][license-image]][license-url]
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]


<div align='center'>
<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://assets.scaleflex.com/Corporate+Branding/%5B2025%5D+ALL+LOGOS+%2B+ICONS/SCALEFLEX/VXP+logo/Horizontal+White/VXP+logo+WHITE.png?vh=663932" width="140"/>
</div>

Create your own design & customize it then upload it  on the go by integrating this plugin inside [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).

## Usage

### NPM

```bash
npm install --save @scaleflex/widget-canva
```
### YARN

```bash
yarn add @scaleflex/widget-canva
```
then

```js
import Canva from '@scaleflex/widget-canva'
...
...
...
scaleflexWidget.use(Canva, propertiesObject)
```

### CDN

The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.Canva`

```js
const Canva = window.ScaleflexWidget.Canva
...
...
...
scaleflexWidget.use(Canva, propertiesObject)
```

## Properties

### `title`

<u>Type:</u> `string`.

<u>Default:</u> `'Canva (Design & Upload)'`

The title/label that would be shown & used for the plugin.

### `apiKey`

<u>Type:</u> `string`.

<u>Default:</u> `'scaleflexWidget's canva api key'`

The API key used in initializing canva & creating the design through their SDK.

### `designType`

<u>Type:</u> `string`.

<u>Default:</u> `'A4Document'`

The design type of the design workspace that would be opened to create the design, visit [Canva's design types](https://docs.developer.canva.com/button/reference/design-types) for all available types.

### `fileType: string`

<u>Type:</u> `string`.

<u>Default:</u> `'png'`

The type of the final created design's to be saved & uploaded with it.

### `companionHeaders`

<u>Type:</u> `null` | `object`.

<u>Default:</u> `null`

If you need to pass additonal headers in companion requests then pass them in this property (used in retrieving the metadata of the design file).

### `locale`

<u>Type:</u> `object`.

<u>Default:</u>  locales from scaleflexWidget's backend then default locale file with all labels is under `lib/defaultLocale.js`.

You can override some labels by specifying a translation object here, such as:

```js
{
  strings: {
    canvaPluginTitle: 'Canva (Design & upload)' // overrides the default Standard portraits value to standard verticals
  }
}
```

<!-- Variables -->

[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-canva
[license-url]: https://opensource.org/licenses/MIT
[sfx-url]: https://www.scaleflex.com/
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-canva
[codeSandbox-url]: https://codesandbox.io/p/sandbox/scalelfex-widget-v4-sandbox-dtp6l3?file=%2Fsrc%2Findex.js


[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-canva?label=Version&style=for-the-badge&logo=npm
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox