# Update A QR Code

Once a QR Code has been generated and rendered to the page trying to dynamically set any properties of the QR Code such as the background colour would require a page refresh in order for the plugin to re-generate the SVG or Canvas element.

In order for qr codes to be dynamically updated live on the page we have included an 'Update A QR Code' workflow action.

<figure><img src="https://3172786800-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6bDlj4i7nUWwEh1HscST%2Fuploads%2FbxrNodn6y4D0RRa0CtNL%2F14.png?alt=media&#x26;token=259422dc-7124-4659-9bab-7dcf09af9adc" alt=""><figcaption></figcaption></figure>

### States

In order to take full advantage of modifying or updating a QR code we have exposed all of the available options as a state on the QR Codes element. The below details the available states and the parameters that are expected to be passed.

### Data

The data to encode in the QR Code, such as a URL

Data Type : Text

### Foreground Colour

The colour of the foreground or 'dots'

Data Type : Text

Parameters : Hexadecimal colour value such as #000000 or an rgba value including transparency such as rgba(0, 0, 255, 0.4)

### Size

The size of the QR Code in px. The QR Code will always be a 1:1 ratio and the plugin will take the width of the element as both the width and height.

Data Type : Integer (Number)

### Margin

The margin around the QR Code in px

Data Type : Integer (Number)

### Foreground Style

The style of the foreground or 'Dots'. The parameters passed must match exactly as defined below. (Excluding the '')

Data Type : Text

Parameters : 'square'  'dots'  'rounded'  'extra-rounded'  'classy'  'classy-rounded'

### Enable Foreground Gradient

Enable a colour gradient. In order for the plugin to switch from generating a flat colour to a gradient you will first need to pass a true value. The QR Code will then update its parameters and use the start and end colours as defined.

Data Type : Boolean (Yes / No)

### Foreground Gradient Type

The type of gradient

Data Type : Text

Parameters : 'linear' 'radial'