First, start with an image (preferably a PNG) that contains the information you want to display, along with a blank spot to enter the user specific information. **Please note that if your graphic is currently in PDF format (or anything other than PNG, JPG or GIF), you will need to grab a screenshot of the item and save as PNG.
Upload that to your media library and grab the URL. Make sure you set the permissions to public as the image generator can't login on behalf of someone.
Once uploaded, you can now overlay your message. Start by grabbing the URL of the graphic you uploaded. Then construct the URL as such:
- The base will start with your domain name followed by /image/overlay? (e.g. https://client.clients.peoplevine.com/image/overlay?)
- Append any or all of the following attributes (where main_image is the only thing required):
- main_image - the file you just uploaded
- size - the font size of the first text (drawText)
- color - the color of the first text
- drawText - the text to draw on the image
- text_x - where to place the text (x position)
- text_y - where to place the text (y position)
- font - reference an existing font (advanced use case)
- centered - true or false if we should center the text at that position or start it there
- drawText2- the text 2nd set of text to draw on the image
- text2_x - where to place the 2nd set of text (x position)
- text2_y - where to place the 2nd set of text (y position)
- size2 - the font size of the 2nd text (drawText2)
You may need to test the x and y positions along with font size to identify the best experience, just continue to construct your URL with these changes until you've found a perfect match. At which point you can leverage that URL along with filling in the blanks with HAPI variables, for creating a quick way to customize a document for a person.
An example of the URL is:
https://client-name.clients.peoplevine.com/image/overlay?size=32&color=000&drawText=***PERSONS%20NAME%20HERE***&main_image=https://peoplevine.blob.core.windows.net/media/...&text_x=825&text_y=425&font=/fonts/Avenir.ttc¢ered=true&drawText2=***DATE%20HERE***&text2_x=250&text2_y=780&size2=18