|
|
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='http://www.diamondselections.com/ifrmRetailFeed.aspx?AccountID=12345678'
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='//www.diamondselections.com/Embed/client_assets/initdiamondsearch.js'></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.
|
No |
FAQ
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
|