Switchboard Canvas

Property Reference

This reference guide gives you a list of each property available on each element overridable via the API.

Properties are specified in the `elements` object, either at the template level, or at a size-specific level. This gives you the flexibility to override values from your template on all sizes that you specify in the request, or at specific sizes, or a combination of both.

Request

PropertyTypeDescriptionExample
formattext

Example text

qualitynumberWhen format is set to jpg, sets the quality of the resulting image.

0.7

templatestringThe API name of the template.

quote

sizesarray
urlstringA URL of a blog post or page.

https://www.cnn.com

batchUrlstringA URL of a resource containing an array of element overwrites.
webhookstringA URL of a webhook that will receive a POST notification when batch processing (either from Google Sheets, the API, or Airtable) is complete.
airtableApiKeystringAn API key generated within Airtable used to access data.
tweetstringA URL to a tweet on twitter.com.
updateTwitterHeaderbooleanOnce the user has authenticated to Twitter, the profile's header can update with an image from the given template.

true false

googleSheetsDocumentIdstringThe ID of a Google Sheets document to use for batch processing.

1pJTOSbnQDy...nFskuhjxfg

googleSheetsSheetNamestringThe name of the Sheet within the Google Sheets document.

Sheet1

useAwsbooleanDetermines whether Switchboard Canvas should attempt to move the created image to a custom AWS S3 bucket.

true

Text

PropertyTypeDescriptionExample
anglenumberThe angle of the text within its bounding box.

0 - 360

fillTextBoxbooleanIf true, the text resizes automatically to fix the bounding box.

true false

fontFamilytext

Example text

opacitynumberThe opacity of the text.

0.0 - 1.0

horizontalAlignmentenumThe horizontal alignment of the text with it's bounding box.

left right center

maximumFontSizenumberThe maximum font size to use when fillTextBox is true.

100

texttextThe non-empty text to use in the element.

Example text

textColorstringThe color of the text.

#FFFFFF

translateToenumThe language code specific if this text should be translated.

fr

Image

PropertyTypeDescriptionExample
anglenumberThe angle of the image within its bounding box.

0 - 360

backgroundColorstringThe background color when `contain` is true.

#FF0000

backgroundOpacitynumberThe opacity of the background color.

0.0 - 1.0

containbooleanWhether the image is fully contained within it's bounding box.

true false

cornerRadiusnumberThe size of the corner radius of the image.

0 - 50

horizontalAlignmentenumThe horizontal alignment of the image within it's bounding box.

left right center

opacitynumberThe opacity of the image element.

0.0 - 1.0

urlstring

https://via.placeholder.com/1920x180

qrCodestring

https://www.google.com

verticalAlignmentenumThe vertical alignment of the image within it's bounding box.

top middle bottom

Rectangle

PropertyTypeDescriptionExample
anglenumberThe angle of rectangle within it's bounding box.

0 - 360

fillColorstringThe color of the rectangle.

#FF0000

opacitynumberThe opacity of the rectangle element.

0.0 - 1.0

Examples


{
    "template": "my-template",
    "sizes": [
        {
            "width": 1920,
            "height": 1080
        },
        {
            "width": 1080,
            "height": 1080
        }
    ],
    "elements": {
        "text1": {
            "text": "Both sizes will have this text!"
        }
    }
}


{
    "template": "my-template",
    "sizes": [
        {
            "width": 1920,
            "height": 1080,
            "elements": {
                "text1": {
                    "text": "This image will be 1920x1080"
                }
            }
        },
        {
            "width": 1080,
            "height": 1080,
            "elements": {
                "text1": {
                    "text": "And this image will be 1080x1080"
                }
            }
        }
    ]
}

{
    "template": "my-template",
    "sizes": [
        {
            "width": 1920,
            "height": 1080,
            "elements": {
                "text1": {
                    "text": "Overriding the text on this 1920x1080 image"
                }
            }
        },
        {
            "width": 1080,
            "height": 1080,
            "elements": {
                "text1": {
                    "text": "And this square has a different background image!"
                },
                "background": {
                    "url": "https://www.somewhere.com/nice-image.png"
                }
            }
        },
        {
            "width": 1080,
            "height": 1920,
            "elements": {
                "background": {
                    "opacity": 0.5
                }
            }
        }
    ],
    "elements": {
        "text1": {
            "text": "Setting some default text here"
        }
    }
}

We care about the protection of your data. Read our Privacy Policy.

© 2022 switchboard.ai. All rights reserved.
Privacy Terms Cookies