Using URI tokens (or whatever) to make unique instances eCards

I’m a designer and I’ve been asked to create some static eCards that thank people for donations or inform people of gifting on their behalf. I’m wondering if there’s any standard way using Hype(Pro) to send some kind of URI tokens or get info from a DB to personalise the eCards with somebody’s Name and the givers Name and so on.

I don’t use Hype but recall it’s original release and as much as I don’t especially like eCards this seems like a way make it a bit more fun and aesthetically challenging. If there’s a way to do it post-Hype by coding in some JavaScript to edit the DOM to insert the names from the tokens that anybody has already explored I’d love to know how you went about it.

Just thought I’d ask the question before I spend hours learning the tool and reading all the Documentation and Forums to see if this is doable.

Thank you in advance.

The key to accomplishing this with Hype is that you can set unique element IDs on elements, and then dynamically change their inner HTML via JavaScript.

Getting the value of the name/giver’s name is a little bit up to you. As an example, you could simply include these in the URL string. If it were done this way, the basic flow would be:

  1. While editing your document, give the element containing your text a unique element ID (via the Identity Inspector)
  2. On scene load, setup javascript which will read the URL string
  3. Parse this string to extract the name
  4. Lookup the element via its unique element id using hypeDocument.getElementById()
  5. Combine the name variable and element text to set the inner HTML to your new string

For parsing the URL, there’s plenty of info via google/stackoverflow. We also have documentation on using javascript with Hype.

1 Like