Cabau.nl: FitChef Widgets

JavaScript to render FitChef widgets.

Usage

To use the widget:

  1. Add the div element where the widget should show: 
    <div class="fc-widget1206" data-fc-widget="banner"></div>
    <div class="fc-widget1206" data-fc-widget="featured"></div>

  2. The widget code needs to be placed before: 

    <!-- HERE -->
<div id="page">...</div>
  3. Add the script tag to the <head> of your website: 
    <!-- Start FitChef widget -->
<script type="text/javascript">
(function(d,s){var e=d.createElement(s);e.type='text/javascript';e.async=true;e.src='https://cabaulifestyle.widget.fitchef.com/scripts/widget.js';e.className='fc-widget1206-script';var f=d.getElementsByTagName(s)[0];f.parentNode.insertBefore(e,f)})(document,'script');
</script>
<!-- End FitChef widget -->

Widget (banner) implementation on Cabau

Insert in this exact location


      <header class="site-header header--logo_left_links_center header--standard header--is-standard">
        ::before
        <div class="container">...</div>
        <div id="CartPopoverCont" class="js-cartToggle header-cartPopover">...</div>

        <script id="CartPopover" type="text/x-template">...</script>
        <-- Place widget code here -->
        <div class="fc-widget1206" data-fc-widget="banner"></div>
      </header>

Widget (featured) implementation on Cabau

Insert the following HTML inside the content page.


    <div style="
        padding: 72px 0 100px;
        border-top: 1px solid rgba(179, 144, 130, 0.2);
    ">
      <div class="container">
        <div class="fc-widget1206" data-fc-widget="featured"></div>
      </div>
    </div>

Usage

To use the customlink:

  1. Append link to main menu with custom class and <style> block. 
            
          <style>
            .fc-link-main-menu {
              font-size: 15px;
              font-family: 'Quincycf-bold';
              color: rgb(106, 44, 45);
              font-family: Nunito, sans-serif;
              display: flex;
              align-items: center;
              text-decoration: none;
            }
          </style>

          <style>
            .fc-link-main-menu .fc-link-tag {
              display: inline-block;
              background: #FFCD68;
              font-family: 'Quincycf-bold';
              font-weight: 700;
              font-size: 13px;
              border-radius: 2px;
              padding: 2px 5px;
              margin-left: 8px;
            }
          </style>
          <a href="https://maaltijdplan.cabaulifestyle.com/aanmelden?code=cabaulifestyle" class="fc-link fc-link-main-menu">
            Eetschema's op maat
            <span class="fc-link-tag">Nieuw</span>
          </a>
  2. Replace the #toFitChef with the correct onboarding link provided by the widget.

Examples

Widget: Banner-full

Widget 'featured'


Custom links - simulatie hoofdmenu (achtergrond)

Eetschema's op maat Nieuw

🔎 Integration test (home)

Support

If you need support with the implementation please contact us via support@fitchef.nl.

All rights reserved FitChef B.V.