Widget Olifid

Insérez les news sociétés en temps réel sur vos applications web en quelques clics seulement !

Exemple :

(avec affichage du communiqué en entier dans une lightbox centrée – div en surimpression -)

Code Widget :

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

Copy to Clipboard
<script src="https://api.olifid.com/widget.js?apikey=olifidxja8775er38" defer></script>
<div style="padding:10px 20px 10px 20px;" 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(208, 208, 208);
      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 {
      line-height:1.2em;
      text-align:left;
      padding: 6px;
      border-color:#efefef;
            
    }
    #olifid::-webkit-scrollbar {
      width: 10px; /* width of the entire scrollbar */
    }
    #olifid::-webkit-scrollbar-track {
      background: #d0d0d0; /* color of the tracking area */
    }
    #olifid::-webkit-scrollbar-thumb {
      background-color: #f7c300; /* color of the scroll thumb */
      border-radius: 13px; /* roundness of the scroll thumb */
      border: 2px solid #f7c300; /* creates padding around scroll thumb */
    }
    #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.link a:hover{
      color: #f7c300;
      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: #fff;
      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: #f7c300 transparent #f7c300 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);
      }
    }
  #feedmodal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
    max-width:100vh;
	height: 65%;
	background: white;
	border:1px solid #d0d0d0;
    z-index:999;
  }

</style>
<script>
  function olifidInsideWidget(feed) {
	jQuery("body").append('<iframe id="feedmodal" width="100%" height="100%" src="' + feed.href + '" frameborder="0"/>');
	jQuery("body").css('overflow', 'hidden')
  }
  jQuery(document).mouseup(function (e) {
	jQuery("#feedmodal").remove();
	
  });
</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