Marketcheck Widgets Playground — How to use?
What is Marketcheck Widgets Playground?
Marketcheck Widgets Playground is a web portal which provides a live CSS editor and parameters input section which lets user modify styling and parameters. It shows a live preview of the widget in action by applying the defined stylesheets or selected themes and by fetching content dynamically from Marketcheck APIs based on provided input parameters.
Getting started
All Marketcheck widgets use various Marketcheck APIs, hence they need authenticated access to the API platform. This is where a common parameter comes in, access_token . It is required by all widgets available on Marketcheck Widgets.
Generating access token
To generate access_token you will need an API key and an associated client secret key issued under your login to Marketcheck API developer portal. If you do not have the developer portal account, you can create yours here.
Once you have these 2 keys, you need to login here on the widgets portal and go to the Access Token section under the dashboard and generate your access token by entering your API Key and client secret.
Once generated, the access token is valid for 5 hours and needs to be regenerated again. Your details i.e. API Key and client secret are saved.
Customising styles
On collection page, you can select any widget you want to view or customise and you can scroll down to the playground section.
- You can modify parameters according to your use, Access Token is auto-filled once you have generated it in the dashboard.
- You can select from different versions of the widget available. Selecting version updates reference HTML.
- You can select from different themes available for the selected version. Selecting theme updates editable CSS section for the selected theme. You can view your saved themes in playground by toggling the theme toggle button.
- You can modify the selected theme’s CSS in the editor by referring to HTML and you can save your custom theme which will be available in the saved themes tab under the dashboard.
Embedding widgets
Following steps are required to embed widgets on your website/app -
- Import zone.js with
version >= 0.9.0fromhttps://cdnjs.com/libraries/zone.js/0.9.0.You should not import zone.js if it is already being loaded. - Import Marketcheck widgets js file from Marketcheck Widgets code section.
- Once you have filled in all required parameters, you will see code generated in the Embed section. You need to copy generated styles in your stylesheet and generated tag in your HTML.
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js" integrity="sha512-QF4SUNn9Wo31lThxHhhDq0BqYw5lBV93/21oDwE0AeU+r4l2JRpeLLlxoDhoRddyZA5P4Wqf3MUlUiC8Dl7MAQ==" crossorigin="anonymous"></script> <script src="https://storage.googleapis.com/mc-widgets/marketcheck-widgets.v1.0.js"></script> <style>
._mcw_fe_container {
background-color: #ffffff;
display: inline-block;
}
</style>
</head><body>
<fuel-economy
access_token="value"
vin="value"
layout="droplet"
> </fuel-economy> </body>
</html>
In case, if zone.js is being loaded by any framework your are using (like Angular), to make sure it is loaded before your Marketcheck widgets javascript is loaded, you can add Marketcheck widgets javascript file dynamically like this -
document.addEventListener('DOMContentLoaded', function() { let node = document.createElement("script");
node.src = 'url of mc-widgets.js';
node.type = "text/javascript";
document.body.appendChild(node);}, false);
Conclusion
This article should have helped you getting started with Marketcheck Widgets and embedding widgets in your website.
For suggestions or queries, you can reach us at widgets@marketcheck.com
