A layer named photo can be added, which is replaced by the user-specified photo.
The layer itself should be an image, not an SVG element – it can be a placeholder image of some sort, or even just a blank image inserted into the document.
Any user-editable text area should have a layer name that is a valid HTML ID – it should start with a letter, and only contain letters, hyphens, underscores and numbers (ex. comments or endorsement_name).
There should be a rectangle that indicates the area the text can occupy (it can be totally transparent as well). It should be named the same as the text layer, with “-box” appended to the end. For example, comments and comments-box.
Further, you can indicate how the text should be aligned within that box. It defaults to aligned to the top & to the left, but you can add -center or -right to the layer name to align centre- or right-align it, as well as -middle and -bottom to vertically centre or align to the bottom. For example, comments-box-bottom-right will align the text to the bottom right.
There are several tokens that can be added to user-editable text areas that are then replaced by the user’s input.
For example, something like “[first_name] endorses Bernie Sanders” would become, for example, “Jeff endorses Bernie Sanders”.
Be sure to only use fonts available on the website, or commonly-available ones. The final image is created in the web browser, so the font needs to be available there.
Export the file named as: "template.svg"
Upload the file to your Endorsement Page
Tokens for user input
[name]: full name
[first_name]: first name
[last_name]: last name
[mobile_number]: cell phone number
Any custom field on the form can be used – the token is the field’s slug inside square brackets