API

HTML SETUP -- Initializing the SWSELL widget

  1. Place an <iframe> tag in your page's body
  2. Include widget/api.js
  3. Call the SWSELL.init() method using the following properties:
  • host -- domain where your script is hosted (eg: "tenant.solidworks-sell.com")
  • iframeid -- id of your widget iframe (eg: "swsellwidget") [REQUIRED]
  • product -- unique identifier of your product (eg: "eyeglasses", "123ABC") [REQUIRED]
  • customer -- unique identifier of your customer (eg: cart id, user id, session id) [REQUIRED]
  • template -- unique id, name or template url slug in your SOLIDWORKS Sell environment [REQUIRED]
  • selection -- sets group selection to true or false. Selection is set to true when an Object is passed in (eg: {"highlighting": false}) [OPTIONAL]
  • selection.highlighting -- enables highlighting when switching groups [OPTIONAL]
<!-- START place within BODY element -->
<iframe id="{{iframeid}}" src="//{{host}}/client/widget"></iframe>

<script src="//{{host}}/widget/api.js"></script>
<script type="text/javascript">
    SWSELL.init({
        iframeid:  /*iframeid*/  ,
        product:   /*product*/   ,
        customer:  /*customer*/  ,
        template:  /*template*/  ,
        selection: /*true, false, Object*/
        }
    );
</script>
<!-- END place within BODY element -->

Then configuration control elements can be added outside of the iframe.

<iframe id="{{iframeid}}" width="650" height="650" frameborder="0" scrolling="no" src="//{{host}}/client/widget"></iframe>

<ul data-controls="groups"></ul>
<ul data-controls="options"></ul>
<ul data-controls="parts"></ul>
<ul data-controls="materials"></ul>

<script src="//{{host}}/widget/api.js"></script>
<script type="text/javascript">
    SWSELL.init({
        iframeid:  /*iframeid*/  ,
        product:   /*product*/   ,
        customer:  /*customer*/  ,
        template:  /*template*/  ,
        selection: /*true, false, Object*/
        }
    );
</script>

HTML SETUP -- Optional Attributes

Displaying lists as dropdown menu examples:

<ul data-controls="options-drop-down"></ul>
<ul data-controls="materials-drop-down"></ul>

Persistent / static options menu examples:

<ul data-controls="options" data-static="true"></ul>
<!-- Available as a dropdown -->
<ul data-controls="options-drop-down" data-static="true"></ul>
<!-- Add a data-group attribute to specify a group belonging to the Option Set -->
<ul data-controls="options-drop-down" data-static="true" data-group="{{Group Name}}"></ul>

HTML SETUP -- "Tooling" Controls

The following classes can be added to your DOM elements to implement tool controls:

  • toggleThreeSixty -- toggles 360 degree animation
  • toggleRulerVisible -- toggles the ruler visibility
    • use with toggleUnitOfLength -- imperial/metric indicator
  • setView -- sets the view (requires data attribute 'data-view')
  • showHelpVideo -- Displays an embedded video in a modal dialog
  • historyButton -- Undo and redo configuration changes
  • reset -- Reset to default configuration
  • fullScreen -- Expand widget to fullscreen
  • arQuickLook -- "AR" button for AR-enabled templates on tenants who have AR activated

Examples:

<div class="toggleThreeSixty"></div>

<!-- Ruler -->
<div class="toggleRulerVisible"></div>
<div class="toggleUnitOfLength action-btn-unit-system imperial"></div>

<!-- View Controls -->
<div class="setView" data-view="Default"></div>
<div class="setView" data-view="X+"></div>
<div class="setView" data-view="X-"></div>
<div class="setView" data-view="Y+"></div>
<div class="setView" data-view="Z+"></div>

<!-- Help Modal -->
<div class="showHelpVideo">HELP</div>

<!-- Configuration History -->
<div class="historyButton undo">UNDO</div>
<div class="reset"></div>
<div class="historyButton redo">REDO</div>

<div class="fullScreen"></div>

<a class="arQuickLook"></a>

API Functions

  • init(options) -- initializes widget and binds control elements
SWSELL.init({
    iframeid:  /*iframeid*/ ,
    product:   /*product*/  ,
    customer:  /*customer*/ ,
    template:  /*template*/ ,
    selection: /*true, false, Object*/
});
  • reloadWidget(options) -- same options as init(), but re-initializes the widget iframe (eg: switching templates).
    • Note: To transfer configurations between templates that share the same materials, you would need to implement the transferConfig: true setting:
SWSELL.reloadWidget({
    template: /*template*/ ,
    customer: /*customer*/ ,
    product:  /*product*/  ,
    transferConfig: true
});
  • getBOM -- getter for the Bill of Materials of the current, in scene, configuration
    • Optionally, you can query the BOM for a specific group with a {group: "group-name"} object
SWSELL.getBOM(/*optional group query*/);
  • randomize -- Generates a completely random configuration permutation
SWSELL.randomize();
SWSELL.randomize("group-name");
SWSELL.randomize("group-name1,group-name2");
SWSELL.randomize(["group-name1", "group-name2"]);
SWSELL.takeSnapshot();

window.addEventListener("message", receiveMessage, false);

function receiveMessage (event) {
    // Check for serialized snapshot
    const isBase64 = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)?$/.test(event.data);
    if (!isBase64) return;
    const image = `data:image/png;base64,${event.data}`;
}
  • order(options) -- place an order. This is also available via the Server API.
    • options not required; isTest defaults to false
    • returns an orderId, image, and an array of skus for reference
SWSELL.order();
SWSELL.order({isTest: /*true/false*/});
  • orderConfirm -- use this to confirm your order. This is also available via the Server API.
SWSELL.orderConfirm({orderId: /*orderId from above*/});
  • orderCancel -- use this to cancel your order. This is also available via the Server API.
SWSELL.orderCancel({orderId: /*orderId from above*/});
  • toggleSelection -- Toggles the ability to select objects in the scene with click/touch
SWSELL.toggleSelection();
  • getSelectedGroup -- Returns the name of the currently selected group
SWSELL.getSelectedGroup();
  • getView()/setView({view}) -- Programmatically allows you to get a view, save it, and come back to that view
const view = await SWSELL.getView();
SWSELL.setView(view);
  • exportSceneAsGLTF -- downloads a GLTF binary resource in your browser
SWSELL.exportSceneAsGLTF({binary: true});
  • fullScreen -- Expands page to full screen
SWSELL.fullScreen();
← IntroductionGetting Started →