Les Widgets

Widgets

This page presents the ChooseMyCompany javascript widget.

All the widgets are responsive, which means that their content will adapt to the available space.
All the widgets are asynchronously loaded, which means that they will not slow your page loading.

For each of them, you will find display examples, the widget code and the possible configuration attributes.

Currenlty available widgets:

"Scores" widget
"SingleScore" widget
"Stars" widget
"Reviews" widget
"Form" widget
"Hover" widget
About window.mentreprisesAsyncInit()

"Scores" widget

This widget displays all the available scores (and stars) for the given company.

Examples :

<!-- Widget container. The content will adapt responsively to the available width. -->
<div class="mentreprises-scores-container" data-company="ChooseMyCompany"></div>

<!-- Script to load the widget content. The containerClassName must point to the widget container(s). -->
<script>
  window.mentreprisesAsyncInit = function() {
    Mentreprises.init({
      scores: { containerClassName: 'mentreprises-scores-container' }
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id; js.charset = 'utf-8';
     js.src = 'https://cmc-assets-pd.s3.fr-par.scw.cloud/generated/js/ext-api.js';
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'mentreprises-js'));
</script>

"SingleScore" widget

This widget displays the chosen score type ("employees", "trainees" ou "candidates") for the given company.

Examples :

<!-- Widget container. -->
<div class="mentreprises-singlescore-container" data-company="ChooseMyCompany" data-type="trainees"></div>

<!-- Script to load the widget content. The containerClassName must point to the widget container(s). -->
<script>
  window.mentreprisesAsyncInit = function() {
    Mentreprises.init({
      singleScore: { containerClassName: 'mentreprises-singlescore-container' }
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id; js.charset = 'utf-8';
     js.src = 'https://cmc-assets-pd.s3.fr-par.scw.cloud/generated/js/ext-api.js';
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'mentreprises-js'));
</script>

Container attribute	Description
`data-company`	Name of the company
`data-type`	Score type: "employees", "trainees" or "candidates"
`data-score-threshold` (optional)	If filled, the widget will only be displayed if the score is above this value

"Stars" widget

This widget displays the chosen score type ("employees", "trainees" ou "candidates") as stars for the given company.

Examples :

<!-- Widget container. -->
<div class="mentreprises-stars-container" data-company="ChooseMyCompany" data-type="trainees"></div>

<!-- Script to load the widget content. The containerClassName must point to the widget container(s). -->
<script>
  window.mentreprisesAsyncInit = function() {
    Mentreprises.init({
      stars: { containerClassName: 'mentreprises-stars-container' }
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id; js.charset = 'utf-8';
     js.src = 'https://cmc-assets-pd.s3.fr-par.scw.cloud/generated/js/ext-api.js';
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'mentreprises-js'));
</script>

Container attribute	Description
`data-company`	Name of the company
`data-type`	Score type: "employees", "trainees" or "candidates"
`data-stars-size` (optional)	Stars size: "big", "medium" (default) or "small"
`data-stars-color` (optional)	If filled, force the stars color: "white", "darkgrey", "yellow"
`data-score-threshold` (optional)	If filled, the widget will only be displayed if the score is above this value

"Reviews" widget

This widget displays the chosen score ("employees", "trainees" or "candidates") for the given company.

Examples :

<!-- Widget container. The content will adapt responsively to the available width. You can set the height with data-height if needed. -->
<div class="mentreprises-widget-container" data-company="ChooseMyCompany" data-type="trainees" data-height="auto"></div>

<!-- Script to load the widget content. The containerClassName must point to the widget container(s). -->
<script>
  window.mentreprisesAsyncInit = function() {
    Mentreprises.init({
      widgets: { containerClassName: 'mentreprises-widget-container' }
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id; js.charset = 'utf-8';
     js.src = 'https://cmc-assets-pd.s3.fr-par.scw.cloud/generated/js/ext-api.js';
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'mentreprises-js'));
</script>

Container attribute	Value
`data-company`	Name of the company
`data-type`	Default tab to display: "employees", "trainees" or "candidates"
`data-height`	Widget height. Can be a number of pixels or "auto" to make the widget self-adapt to its content

"Forms" widget

This widget displays the happy form for the given form hash.

Examples :

<!-- Widget container. The content will adapt responsively to the available width. You can set the height with data-height if needed. -->
<div class="cmc-form-container" data-form-hash="e3R10698Gh41" data-height="auto"></div>

<!-- Script to load the widget content. The containerClassName must point to the widget container(s). -->
<script>
  window.mentreprisesAsyncInit = function() {
    Mentreprises.init({
      forms: { containerClassName: 'cmc-form-container' }
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id; js.charset = 'utf-8';
     js.src = 'https://cmc-assets-pd.s3.fr-par.scw.cloud/generated/js/ext-api.js';
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'mentreprises-js'));
</script>

Container attribute	Value
`data-form-hash`	Hash of the happy form
`data-height`	Widget height. Can be a number of pixels or "auto" to make the widget self-adapt to its content

"Hover" widget

This widget is the easiest to integrate, as it does not require any page design.
The widget will appear in the bottom left corner of your site, hovering your actual content.

Examples :

<!-- Script to load the hover content. -->
<script>
  window.mentreprisesAsyncInit = function() {
    Mentreprises.init({
      hover: { companyName: 'ChooseMyCompany', types: [ 'employees', 'trainees', 'candidates' ] }
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id; js.charset = 'utf-8';
     js.src = 'https://cmc-assets-pd.s3.fr-par.scw.cloud/generated/js/ext-api.js';
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'mentreprises-js'));
</script>

About window.mentreprisesAsyncInit()

The window.mentreprisesAsyncInit() function is executed once the asynchronous javascript is loaded.

It lets you define what Mentreprises widgets / modules you want to activate in the current page (stars, scores, widget, hover, ...).

You can add a "lang: 'fr'" parameter to force the language. By default, the language will be extracted from the html lang="" attribute of the page.

You can add a "doLog: true" parameter to print helpful logs in the window console.