6. Slider snippet

Please make sure you target the correct environment with the absolute url.

Production: https://slider.maklaro.com/src.latest.js

Staging: https://slider-staging.maklaro.com/src.latest.js

The HTML snippet - which reloads the slider form - has various configuration variables:

  • data-jwt = init token

  • data-partner-id = your personalized ID which is provided to you by Maklaro

  • data-language = currently we just support “DE”

  • data-type = “evaluation”

  • data-primary-color = color of the loader icon while the the slider form is loading

  • data-lead-flow-code = the Lead-Flow-Code is provided to you by Maklaro and links the leads to the process configuration

  • data-max-fullscreen-width = optional specification to override the default value of 768px. It defines the break point for the mobile view.

  • data-hide-fullscreen-on-start = optional specification to define the fullscreen behavior in the mobile view. In default the fullscreen mode gets activated directly on the initial page load. Is this value set to true/1 the fullscreen mode will start after the user startet the slider manually.

6.1. Authenticated requests

To integrate our slider snippet, please create init tokens and push them to your view.

Then the view should include an integration snippet like the following:

<div class="container">
    <div id="maklaro-slider-widget"
        data-jwt="<?php echo $token; ?>"
        data-partner-id="[YOUR-PARTNER-ID]"
        data-language="DE"
        data-type="evaluation"
        data-primary-color="#1B76BB"
        data-lead-flow-code="[YOUR-FLOW-CODE]"
        data-max-fullscreen-width="540"
        data-hide-fullscreen-on-start="1"
        >
    </div>
    <script src="https://slider.maklaro.com/src.latest.js"></script>
</div>

6.2. Guest requests

For requests without backend integration, we also have a “guest” snippet. This enables easier implementation, but is less protected against misuse of the API with your partner ID. Non-authorized usage is disabled by default, please contact us first to enable the Guest-Mode.

The snippet is very similar to the one above, just omit the data-jwt parameter.

<div class="container">
    <div id="maklaro-slider-widget"
        data-partner-id="[YOUR-PARTNER-ID]"
        data-language="DE"
        data-type="evaluation"
        data-primary-color="#1B76BB"
        data-lead-flow-code="[YOUR-FLOW-CODE]"
        data-max-fullscreen-width="540"
        data-hide-fullscreen-on-start="1"
        >
    </div>
    <script src="https://slider.maklaro.com/src.latest.js"></script>
</div>