Intégration du widget Olifid

Exemple 2 – affichage vers une page de destination différente

Exemple :

(avec affichage du communiqué entier vers la page de destination /widget/detail/)

Code Widget :

(à copier-coller)

Copy to Clipboard
<script src="https://api.olifid.com/widget.js?apikey=YOUR-API-KEY" defer></script>
<div id="olifid" data-query='' data-linkscheme="/widget/detail/" 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: #f8cdcd;
      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>

Contactez-nous pour obtenir votre clef d’API

Pour paramétrer plus en détail votre widget : Widget advanced

Voir d’autres exemples :