Sharp Product Widget

Preparation

First you need to add a javascript file and a target container element to your website.

• The target container element must be given a unique id. For example

  <div id="my-target"></div>

• Add the element in the HTML code where you want the widget to appear.

Choosing the right parameters

The script has to to be configured to deliver proper content. You will need to know

• The id of the HTML-Element that will be replaced with the Sharp content
• The names of the Sharp product or products that you want to display
• The language that you want to use.

Getting to know the proper model names might be the most challenging part!

• Go to the public Sharp website and search for the desired models. This could be for example: PaperCut MF
• Open the product detail page and look at the address bar of the browser. It contains the Sharp product name product=PAPERCUT.

Now you know that PAPERCUT is the real product name of PaperCut MF. You can use it as the parameter to configure the widget.

I bet you already came across notations like en-GB or nl-NL. They are used to specify geographical regions and languages. This notation consists of two tags.

• The language tag which is generally defined by ISO 639-1 alpha-2
• And the region tag which is generally defined by ISO 3166-1 alpha-2

Now you know everything you need to configure and execute the function sharpwidget.

When sharpwidget gets executed, the inner content of the defined container element will be replaced with an IFRAME that will render a Sharp page on your webpage.

Executing the script

To call the function after the page has loaded, simply add following lines of code before the closing </body> tag of your website.

<script>
window.onload = function () {
	sharpwidget({
		container:'YOUR_TARGET_CONTAINER_ID',
		product:'THE_SHARP_MODEL_NAMES',
		language:'THE_REGION_AND_LANGUAGE_CODE'
  });
}</script>

Here on this page we use the onclick-event of buttons to trigger the execution of the script.

<button onclick="runAll();">Run the Demo!</button>

The function runAll() executes all widgets on this website.

javascript-code

<script type="text/javascript">  
  function t1(){
    sharpwidget({
      container :   'sharp-widget-container1',
      language  :   'en-gb', //de-de, fr-fr, ru-ru,
      product   :   'MXC607P,MXB707P,MXB557P,NX8081' //multiple product at once, whoah!
    });
  }
  
  function t2(){
    sharpwidget({
      container :   'sharp-widget-container2',
      product   :   'MXC607P',
      language  :   'en-gb'
    });
  }
  
  function t3(){
    sharpwidget({
      container :   'sharp-widget-container3',
      product   :   'PNCD701',
      language  :   'fr-fr'
    });
  }
  
  function t4(){
    sharpwidget({
      container :   'sharp-widget-container4',
      product   :   'NBJD540',
      language  :   'en-gb'
    });
  }
  
  function runAll(){
    //trigger all sharp widgets
    t1();
    t2();
    t3();
    t4();
  }
</script>