Installation

Step one: adding a domain

If you haven’t registered yet, better do it right now. If you haven’t registered and you haven’t specified a domain, 3D-reviews will display a message on your website asking you to confirm your domain. Add your domain on the My Account → My Domains page.

As soon as a 3D-review is opened on any page of a newly added domain, the domain is confirmed and added to 3D-reviews’ usage statistics.

Embedding 3D-reviews on your product pages

3D-reviews can be integrated with an iframe embedding code. Just find the product you want in the Catalogue and copy the code.

Enter the iframe code in your HTML at the position where you’d like a 3D-review to appear on your product page:

To change the dimensions of the 3D-review area, modify width and height parameters in the embedding code. We recommend a frame size of 700px x 500px.

Placing 3D-review in a Lightbox

The most convenient way to display 3D-reviews is in lightboxes over the product page. Place a launch button for 3D-review lightbox in a prominent position with product information near other media content.

The screenshots below are taken from a 3D-review on our product demo page.

When the button is pressed, a lightbox containing the embedded iframe code plays the chosen 3D-review over the dimmed content of the product page.

We’ve created 22 ready-to-use versions of the "Launch 3D-review" button. Choose one you like and install it on your website.

Click the image below to open all versions on a new page:


"Launch 3D-review" buttons.

Placing a 3D-review into the body of your product page

You can also embed 3D-reviews into the body of the product page itself – as we do in our Review3 Catalogue. Please note that in this case we recommend setting "After click on preview" start mode in the My Account → Style section.

3D-reviews on mobile devices

3D-reviews work on all modern smartphones and tablets with Android and iOS. 3D-reviews are fully optimized for mobile usage and gesture control.

By the way, your customers will get a better 3D-review experience on a mobile than on a PC. This is because rotating the product with your hands and fingers feels much more natural; it’s closer to the way you’d really look at the product.
For mobile devices, we recommend you use a simplified full-screen 3D-review page than a lightbox.

Try opening this page on a mobile device: https://reviewthree.com/review3_simple.html?8407

You’ll see that the source code for this page is very simple – the body tag contains only one iframe tag, which embeds the requested 3D-review (REVIEW3_ID is received from the URL parameter). You can use the same page on mobile devices instead of a lightbox. If you copy our “review3_simple.html” page to your webserver, you’ll see that the 3D-review “REVIEW3_ID=8407” (with the URL https://mywebstore.com/review3_simple.html?8407) opens automatically on page load.

If your webstore has a special mobile version (e.g. https://m.mywebstore.com), then tapping the 3D-review start button will automatically open the simplified full-screen 3D-review page.

If your webstore has adaptive design, then after tapping on the 3D-review start button, your code needs to check the screen dimensions available on the browser. If they‘re smaller than those on the PC version, the simplified full-screen 3D-review page should be opened instead of the PC-version lightbox.

If you skip this step

Some lightboxes support adaptive presentation of content on mobile devices, but they may be targeted at presenting images and videos only. If you want to present 3D-reviews in lightboxes on mobile devices, please check lightbox functionality to ensure that 3D-reviews are displayed correctly in both landscape and portrait orientations on different sized devices. It’s important that your customers feel comfortable working with the content of your webstore.

3D-reviews look & feel setup

Settings in the My Account → Style section allow you to manage the appearance and behavior of your 3D-reviews so that they fit perfectly with the overall look and feel of your webstore.
You can set up color schemes, font style and size, and 3D-review start mode. If you embed 3D-reviews in the body of the page itself, we recommend you change start mode to "After click on preview"

Automatic installation

To save time, you can install 3D-reviews on your website automatically. To do this, you have to match your product with a 3D-review.

Click here to see a working example of automatic 3D-review installation.

You can search for 3D-reviews using several criteria.

  • By barcode, You might store barcode information (UPC, EAN or GTIN) when registering products in your warehouse or when scanning them at point of sale.
    scanned-barcode
    We store these barcodes too. We support 8-digits UPC-E (GTIN-8), 12-digits UPC-A (GTIN-12), 13-digits EAN (GTIN-13) and 14-digits GTIN-14. Don't worry about the exact format of the barcode, we detect it automatically. Search example:
    https://api.reviewthree.com/products/ai/barcode/888793396407
        
  • By name. If you don't have barcode data, use our "magic search" by name. Search example:
    https://api.reviewthree.com/products/ai/name/Apple%20iPhone%206
        

For automatic installation use short JS-code on your webpage. This code is launched when the page is displayed and uses specified parameters to request search results from the Review3 server.

Example of search results for barcode "888793396407":

<Products xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
    <Product>
        <Category>
            <Id>3</Id>
            <Name>Laptops</Name>
            <IsPro>true</IsPro>
        </Category>
        <Id>7519</Id>
        <Name>HP 250 G3 Black</Name>
        <Vendor>
            <Id>22</Id>
            <Name>HP</Name>
        </Vendor>
    </Product>
</Products>

The array of results Products contains no elements or one element Product, which child element Id is an identifier of 3D-review.

If search results are not empty, the page initialization code creates a "Show 3D-review" button on the page. This button launches the lightbox with the 3D-review. The code also creates an iframe with src value like this: "//reviewthree.com/embed/$REVIEW3_ID$".
Your server can generate the search code parameter from your product data.

By default, results are presented in XML format. You can also get results in JSON format by adding the following to the request header:

Accept: application/json

Results precision

Please note that although automatic embedding by EAN/GTIN/UPC fields is usually very accurate, we cannot give a 100% guarantee of success. Barcodes can be misread in different regions, and occasionally products that are similar but not the same can be confused.

We recommend you start by using fully automatic installation to ensure that everything’s working okay and to view statistics. For industrial use, we recommend you store 3D-review and product matches on your server after they’ve been inspected by your content manager (see next section).

Storing matches on your server

For industrial use, information about 3D-reviews that match your products should be stored on your server.

This could be a table in your database with the following columns:
  • YOUR_PRODUCT_ID
  • REVIEW3_ID
  • R3_NEED_MANUAL_CHECK
  • R3_PREV_CHECK_DATETIME
Or new fields added to an existing table containing all your products.
When the html code of the page is generated, your web server will generate iframe code with the requested REVIEW3_ID taken from your database.
Initially, matching data can be filled by searching in the table containing all the 3D-reviews. You can download this table here. You can search for matches by any fields. We recommended that your content manager inspects the 3D-reviews for possible mismatches.
You should then configure Review3 service call on your web server to find REVIEW3_ID values for products that don’t have any yet. You can do this when displaying a product web page and cache the results for one day. If you find a new value (this could happen if we’ve recently updated search data or just published a 3D-review for this product), you need to write this value to the database and mark the product for inspection by your content manager.
The following pseudocode describes this process:
function OnProductPageLoad(Product prod)
{
    // Updating 3D-review data for the product
    UpdateReview3Data(prod);
    //  ...
    //  Code of page forming
    //  ...
    // If the product has a 3D-review, we create a button to show it
    if(!prod.Review3_ID.isEmpty())
    {
        String iframeCode = "<iframe width=\"700px\" height=\"500px\" allowfullscreen=\"true\" src=\"//reviewthree.com/ru/embed/" + prod.Review3_ID + "\"></iframe>"
        // This function creates a "Show 3D-review" button on the page that displays a lightbox containing the iframe code
        CreateButtonForLightBox("Show 3D-review", iframeCode); 
    }
}
function UpdateReview3(Product prod)
{
    // If 24 hours has not passed since the last check then exit (there is no sense in checking too often)
    if(currentDateTime() - prod.previousR3checkDateTime < 24h) return;
    if(prod.Review3_ID.isEmpty())
    {
        // First, we try to find the 3D-review by product barcode
        String newProdReview3_ID = R3InstallationService.findReview("EAN", prod.EAN); 
        // If we don't find it by bar code, we try to find it by product name
        if(newProdReview3_ID.isEmpty()) 
            newProdReview3_ID = R3InstallationService.findReview("Name", prod.name); 
        // If we find the 3D-review for this product, we save the 3D-review ID
        if(!newProdReview3_ID.isEmpty())
        {
            prod.Review3_ID = newProdReview3_ID;
            // Mark for manual check by your staff (it is good to check matching from time to time)</span>
            prod.Review3_needManualCheck = true; 
        }
    }
    // Save check time
    prod.previousR3checkDateTime = currentDateTime();
}