Embed API: using HTML instead of Javascript

Most webmasters prefer the JavaScript version of our embed API.  However, you can also use HTML.  Depending on how you publish your pages to the web, the HTML version may be a better fit. 

To add your embed using HTML, you simply need to...

1. add a div element to your HTML page where you want the embed to appear.
   You can size and style this div as you see fit using CSS.  The attributes of this div will determine the behavior of the embed and act as the api using this method.
2. add a script element to the same page. 

You can use the "embed" helper button, shown when editing any configurator or scene, to generate this HTML for you.

Here is an example of a full HTML embed:

<div id="viewer"
      data-kbmax
      data-configurator-id="4004"
      data-show-fields="true"
      data-show-header="false"
      data-show-config-header="true"
      data-show-move="false"|
      data-bind-to-form=""
      style="height: 800px;">
   <a href="http://www.kbmax.com/"
      style="position: absolute; right: 20px; bottom: 20px; width: 12%;">
      <img src="http://kbmax.kbmax.com/images/kbmax_logo_nx108.png"
           alt= "3D CPQ by Epicor" 
           style="max-height: 108px; height: auto; width: 100%;" />
   </a>
</div>
<script src="https://kbmax.kbmax.com/embed.min.js"></script>

HTML Embed Arguments

The available embed arguments and what they control are shown below.  Note the embed syntax differs slighty between the HTML and Javascript versions of this API.

HTML Attribute	Datatype	Required?	Notes
data-kbmax	n/a	Required	Tells Epicor CPQ that you want a scene embed in this div. Without this attribute, the embed won't work.
data-configurator-id	integer	Required	The id of the configurator you wish to embed. You can get this id from the url when you open this scene in the admin tool. For example, if the url is: acme.kbmax.com/admin/configurators/55 then 55is the id of the configurator. If you would like to embed a standalone scene instead of a configurator, then use the parameter scene-id instead.
data-scene-id	integer	Required	The integer id of the scene you wish to embed. You can get this id from the url when you open this scene in the admin tool. For example, if the url is: acme.kbmax.com/admin/scenes/55 then 55is the id of the scene.
data-kbmax-url	text	Optional	The embed script will attempt to load the configurator from the same base kbmax url that was used to load the embed script.  However, if you need to override this behavior, you can specify the kbmaxUrl explicitly.  For example:   kbmaxUrl: "https://mycompany.kbmax.com"
data-bare	boolean	Optional	Only valid for scene embeds. Set to true to have a highly performant scene embed that does not have any ui except the scene itself. Note that field controls, hotspots, etc. are not included in bare embeds. Only the 3D itself.
data-bind-to-form		Optional	Bind to form is a powerful feature for integrating the embed with your app or website. If you have HTML inputs (like text inputs, select, checkbox, etc.), Epicor CPQ can watch these inputs for changes by the user. As the user interacts with your inputs, these values will automatically flow into Epicor CPQ, be matched up with fields in the configurator/scene, and the scene re-rendered. And all of this can happen without any javascript code. For this to work, the name attribute of the inputs in your HTML must match the name of the field in Epicor CPQ. For example, if you have a field named 'Width', then it will be matched with an HTML input with a name attribute of 'Width'. For example: <input type="number" name="Width"> You can target which forms in the parent web page you want Epicor CPQ to watch by providing a CSS type selector for them. Examples: To watch all inputs in a form with id = "my-form": data-bind-to-form="#my-form" To watch all inputs in a form with an id of 'my-form' and another form with an id of 'my-form-2': data-bind-to-form="#my-form, #my-form-2" To watch ALL forms on the page: data-bind-to-form="form"
data-show-fields	boolean	Optional	Whether your pages and field controls will show in the embed. If you plan on having your own custom UI for your user to select options, then set this to false. This attribute only affects the embed if the 'bare' attribute is set to false.
data-show-header	boolean	Optional	Controls whether the Epicor CPQ portal header (with company logo, links to the products and quotes tabs) will show in the embed. Only valid for full configurator embeds. This attribute only affects the embed if the 'bare' attribute is set to false.
data-show-drawer	boolean	Optional	Controls whether the Epicor CPQ portal footer (called the drawer) will show in the embed. Hiding the footer can increase vertical space for the embedded configurator. This attribute only affects the embed if the 'bare' attribute is set to false.
data-show-config-header	boolean	Optional	Whether the configurator header with the name, description, and action buttons of the configurator will be shown in the embed. This attribute only affects the embed if the 'bare' attribute is set to false.
data-show-move	boolean	Optional	We suggest you start the embed with an animation that lets the user know they can rotate and interact with the 3D scene. Otherwise they might think it's just an image!
data-show-submit-button	boolean	Optional	Optionally show a submit button in the page of the configurator. You can use this for example, as an 'add to cart' button. Add a handler through javascript (onSubmit) to determine the behavior you want when the button is clicked.
data-submit-button-text	text	Optional	Determines the label of the submit button.
data-load-image	url	Optional	If the load-style is set to 'image' or 'image + progress', then this attribute can be used to specify a url for the image you want to show while the scene is loading. If this attribute is left blank, Epicor CPQ will automatically use an image of the scene in its resting state.
data-progress-color	hex color	Optional	If the load-style is 'progress' or 'image + progress', then this attribute can be used to specify a hex color for the progress bar.
data-currency	text	Optional	Can be set to the 3 letter ISO code of a currency that the configurator will use for displaying pricing.  If not provided, then the default currency of the company will be used.  The currency ISO code specified must be one of the allowed currencies in the currency settings of the company.
data-id-theme	integer	Optional	Can be set to the id of a Epicor CPQ theme to override the theme currently set in the company settings.
data-fields	object	Optional	Can be used to set starting field values for the embedded configurator.  The object to be passed in follows the same construct as the object passed to setFields (see below in the api section).
data-layout-settings	JSON key:value pairs	Optional	Before your configurator has been loaded, you can adjust the layout settings.  Layout settings are first set with default values in the layout, then overridden by any specific settings used in the configurator calling the layout, and then overridden again by any settings you provide here in the embed. You have as much control as you need, without having to specify everything all the time. For example, let's say you're using the Classic layout, but don't want to show the price widget: HTML Example:  data-layout-settings="{'Show Price':false}"