Hosted collection is an app aiming to get you started with your review collection fast. It's a script you drop on your page and give it your configuration and you can load a review collection form in a layer on top of your existing website (or another website of choice).

Loading the script

Add the following snippet (or equivalent rewrite that fits your solution better)

<script async src="<https://hosted-collection.tycka.io/loader.js>"></script>

Since we are using an async command API for hosted collection it does not matter where on the page you put the script or where you put your configuration script, just that they both execute.

<aside> ⚠️ If you have set up content security headers on your site, be sure to allow *.tycka.io

</aside>

Communicating with the hosted collection

Communication with the hosted collection app happens through commands. These commands are sent to the script via this process:

// 1. Ensure we have a reference to tyckaCommands or create a temporary array.
let tyckaCommands = window.tyckaCommands || [];

// The tyckaCommands object only have one method and its calles `push`.
// 2. Push commands to the tyckaCommand object
tyckaCommands.push(["commandName", ["arg1", "arg1"]]);

Configuring the script

// Required configuration
// Here i am setting the account i want to use for tycka, example sets "my_account"
tyckaCommands.push(["setAccount", ["my_account"]]);

// Optional configuration
// Set the labels you want to use in the form, if you want a spanish form, send in spanish words
tyckaCommands.push(["setLabels", [{
    addComment: "Add comment",
    commentPlaceholder: "Describe your rating",
    formTitle: "Review",
    formSubtitle: "Tell us what you think",
    errorRequired: "Required",
    name: "Name",
    namePlaceholder: "Your name",
    sendReview: "Send review",
    thankYouTitle: "Thank you",
    thankYouSubtitle: "Your review was sent",
    youRated: "You rated {ratingStars}",
    backToStore: "Back to store",
    
    // Example of setting custom field label of field with id "productRating":
    productRating: "Rating",
}]]);

// Optional configuration
// Setting the language of the form, used for fetching translated item values
tyckaCommands.push(["setLanguage", ["en"]]);

// Optional configuration
// Sets the language to use when language detection is not confident enough,
// or when the text is to short to have it's language identifed
tyckaCommands.push(["setLanguageHint", ["en"]]);

// Optional configuration
// Set the order of fields in display, fields with no order set, will be put last.
tyckaCommands.push(["setFieldOrder", [{
    productRating: 1,
    age: 2,
}]];

// Optional configuration
// Set which transaction custom field you want to get the data to use for prepolulation
// Example will put the customerEmail field value from the transaction into the email of the review
tyckaCommands.push("setFieldDataMap", [{
    email: "customerEmail",
}]);

// Optional configuration
// All fields are by default required, to make some fields optional use the following:
tyckaCommands.push(["setOptionalFields", [[
    "rating_comment", // this makes the comment optional for rating field `rating`, the rating is always required
    "age", // makes field `age` optional
]]]);

Open the form

Open from query string

This will try to open the form by using values in the query string. This means that if you have constructed your post-purchase event link to include itemId, transactionId and secret in the query string. Then all you have to do after you have loaded the script and sent your configuration is to issue the following command and the form will be displayed.

tyckaCommands.push(["tryOpenFormFromQueryString", []]);

<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> If any of the query string values are missing, then this call will do nothing.