Intégration du widget Olifid

Exemple widget – affichage à l’intérieur du widget

Exemple :

(avec affichage du communiqué entier à l’intérieur du widget)

Code Widget :

(à copier-coller, pensez à changer YOUR-API-KEY par votre propre clef d’API)

Copy to Clipboard
<script src="https://api.olifid.com/widget.js?apikey=YOUR-API-KEY" defer></script>
<div id="olifid" data-query='' data-linkscheme="inside-widget" data-linkid="id" data-cpnumber="150"><div class="lds-hourglass"></div></div>
<style>
    #olifid {
      border: 1px solid rgb(0, 0, 0);
      height: 50vh;
      width: 100%;
      overflow: auto;
      font-size: 12px;
      text-align: center;
    }

    #olifid table {
      border-collapse: collapse;
      border-spacing: 0;
      text-align: left;
    }

    #olifid table td {
      padding: 6px;
    }

    #olifid table td.date {
      color: gray;
      white-space: nowrap;
      font-size: 10px;
    }

    #olifid table td.link {
      /*white-space: nowrap;*/
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 200px;
    }

    #olifid table td.link a {
      color: black;
      font-weight: bold;
      text-decoration: none;
    }

    #olifid table td.orga {
      color: gray;
      /*white-space: nowrap;*/
      font-size: 10px;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width:80px;
    }

    #olifid table tbody tr:nth-child(odd) {
      background-color: #ebebeb;
      color: #fff;
    }

    #olifid .lds-hourglass {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
      display: inline-block;
      top: 50%;
      transform: perspective(1px) translateY(-50%);
    }

    #olifid .lds-hourglass:after {
      content: " ";
      display: block;
      border-radius: 50%;
      width: 0;
      height: 0;
      margin: 8px;
      box-sizing: border-box;
      border: 32px solid #000;
      border-color: #000 transparent #000 transparent;
      animation: lds-hourglass 1.2s infinite;
    }

    @keyframes lds-hourglass {
      0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }

      50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }

      100% {
        transform: rotate(1800deg);
      }
    }
 </style>
<script>
function olifidInsideWidget(feed) {
jQuery('#olifid').html('<div id="frame" style="height:100%"><div id="back_container" style="background:white;text-align:left;padding-left:5px;padding-top:5px"><a href="#" id="olifid_back" style="color:#000;">< Back to list</a></div><div style="height:96%"><iframe width="100%" height="100%" src="' + feed.href + '" frameborder="0"/></div></div>');
jQuery('#olifid #olifid_back').click(function(e){
e.preventDefault();
jQuery('#olifid #olifid_back').unbind( "click" );
OlifidGetFeeds();
})
}
</script>

Contactez-nous pour obtenir votre clef d’API

Voir d’autres exemples :

Exemple : lightbox centrée

Exemple : intérieur du widget

Exemple : lightbox latérale

Exemple : div de votre choix