Intégration du widget Olifid

Exemple 4 – affichage dans une lightbox latérale

Exemple :

(avec affichage du communiqué entier dans une div en sur-impression sur le côté)

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="inside-widget" data-linkid="id" data-cpnumber="150"><div class="lds-hourglass"></div></div>
<style>
    #olifid {
      border: 2px solid rgb(0, 0, 0);
      height: 70vh;
      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: 4px;
    }

    #olifid table td.date {
      color: #003f7e;
      white-space: nowrap;
      font-size: 9px;
      font-weight: bold;
    }

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

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

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

    #olifid table tbody tr:nth-child(odd) {
      background-color: #f2fff7;
      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(200deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }

      100% {
        transform: rotate(400deg);
      }
    }
  #feedmodal {
	position: fixed;
	top: 70%;
	left: 100%;
	transform: translate(-100%, -70%);
	width: 70%;
    max-width:70vh;
	height: 80vh;
	background: white;
	border:2px solid black;
    z-index:999;
  }
</style>
<script>
  function olifidInsideWidget(feed) {
	jQuery("body").append('<iframe id="feedmodal" width="100%" height="100%" src="' + feed.href + '" frameborder="0"/>');
	jQuery("html").css('overflow', 'hidden')
  }
  jQuery(document).mouseup(function (e) {
	jQuery("#feedmodal").remove();
	jQuery("html").css('overflow', 'scroll');
  });
</script>

Contactez-nous pour obtenir votre clef d’API

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

Voir d’autres exemples :