Integrating viigii's embedded form

The embedded form is the simplest and quickest way to integrate viigii with your site and will provide your users with a streamlined, mobile-ready gifting experience.

This method builds an HTML form, validates user input, and secures your customers' purchase details. Using these purchase details, the viigii embedded form facilitates the following process:

  1. The gift sender selects the viigii option at the retailer’s checkout page and completes the form with the names and emails of the sender and recipient. Your online store supplies a hash of key-value pairs describing the gifts the user is sending (including the name of the gift and a corresponding image). This information will be used to show the gift recipient a preview of their coming gift.
  2. The gift sender completes the retailer’s checkout process and is redirected to the viigii service to customize how their virtual gift will appear. The sender can edit the gift occasion, choose to send via text or email, set the viigii delivery date, and add a personal message.
  3. On the viigii delivery date specified by the gift sender, the gift recipient receives an email or text message containing a link to view their virtual gift.
  4. After virtually unwrapping their viigii gift, the gift recipient will have the option to send a thank-you message to the gift sender.

The viigii embedded form is a fairly simple solution. To create a custom approach, we recommend using the viigii API directly.

Embedding the form in your online store

To get started, add the following code to your checkout page:

<script
  id="vg-wrapper"
  src="https://viigii.it/api/viigii_api.js"
  giftStatus="1"
  vendor_token="YOUR_VENDOR_TOKEN"
  cart_items='[]'>
</script>

The most important line is the vendor_token attribute added to the script tag. This token identifies your account when communicating with viigii. Also you will need to have your domain registered here.

The cart_items attribute

From your server, add the cart item details for each viigii gift (the gift name and corresponding image) to the cart_items attribute. The cart_items attribute accepts a json and should be converted to a string:

cart_items='[{"name": "GIFT_ITEM_1", "image": "GIFT_ITEM_1_URL.png"}, {"name": "GIFT_ITEM_2", "image": "GIFT_ITEM_2_URL.png"}]'

Next steps

Now that you’ve embedded the form on your staging site checkout page and passed it the correct parameters, you're done! To test the process, click the blue viigii button, enter a test email and sample names for the sender and recipient, and submit the form. You'll be redirected to the viigii app to complete the process.

Questions?

Need help with code or have additional questions? We're happy to help. Check out our frequently asked questions for more information or send us an email.