Instant Inventory - Integrate Widgets

You can use ready widgets, the easiest and quickest way to integrate Instant Inventory.

Before you start

First you have to set up your feed for Instant Inventory. You choose your suppliers, which diamonds you want to resell and what markup you want to use. After the setup it can take several hours before your feed is fully ready. The setup screen can be found here (requires a subscription to RapNet with Instant Inventory).

Choose your widget

You can choose from a number of pre-designed search engine widgets which are embedded into your website as an iFrame. The setup screen will let your choose the template that you like most. At the end of the setup you will get one line of HTML code for the iframe to paste into your website at the place you want your search engine to appear.

What happens if someone buys a diamond?

With the search engine widget, in order to buy a diamond, your customer will have to fill in their details, and you will get an email with all the details.

iFrame widget in depth

The iframe implementation is fairly simple, but limited. You do all the customization possible on RapNet, and in the end you paste the iFrame into your own website. The iFrame code will look something like this:
<iframe id='iframeRapnet' src='' height='100%' width='100%'></<iframe>
In the HTML code, the number is your account number. You can choose to change the id, height and width of the iFrame as you like.

New AngularJS widget settings

The new templates are even easier and more flexible. The settings can be changed within the code that you got. The code you get will look something like this:
<div id="diamondsearch" data-apikey="8EC95570ABE6411290197CB28845A6FF" data-theme="#483f8e" data-responsive="yes" data-prices="yes" data-contact="yes" data-ecomm="yes" data-count="30" class=""></div> <script src='//'></script>
Try it yourself, see what it looks like

For ease of use, we've created HTML5 attributes that power the configuration of the diamond search on your website. You can use these for inputting on a custom website, building a CMS integration or even complex JS logic.

Settings HTML5 Attribute Description Default
Color data-theme Change the colors of the diamond search interface by putting in your brand's hexadecimal color. #483f8e
Responsive data-responsive Enable responsiveness if your website can resize or work on mobile for a mobile optimized experience. Yes
Prices data-prices Hide or show diamonds. Especially useful if you are utilizing the diamond search in a B2B environment with authentication protected pricing. Yes
Contact data-contact Allow for users to contact you to find out more information about a particular diamond. Yes
Add to cart data-ecom Enable the Add To Cart button on product pages. You will need to do custom work to complete this.


How do I install the diamond search into my website?

In order to install the new diamond search into your website, you must choose your settings above and press "Get Code". In the pop-up you will get an HTML snippet and a JS snippet to input in your website. Place this on a separate page and the whole experience will be generated.

I already pay for RapNet, do I need anything else to make this work?

This plugin requires a subscription into RapNet's Instant Inventory, now called Instant Inventory. This enables you to set up inventory to share in the administrative panel of your RapNet login.

How do I integrate into my ecommerce platform?

In order to perform a proper integration of the Diamond Search into your ecommerce platform, it is important to understand the architecture of the application as well as the flow that is expected of the integration. The application is written in angular.js and utilizing javascript, we are able to expose the single diamond information to your website. more details