index.html

<!DOCTYPE html>
<html>

<head>
  <title>Embedded Genesys</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
  <meta name="author" content="Genesys Team, helpdesk@genesys-pgr.org" />
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
</head>

<body>
  <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div class="container">
    <div class="jumbotron small">
      <h1 class="display-6">Embedded Genesys</h1>
      <p class="lead">This page demonstrates embedding Genesys data for <code>COL003</code> and <code>BEL084</code> 
        from <a href="https://www.genesys-pgr.org" target="_blank">Genesys</a> in a 3rd-party website.<br />
        <b>Note:</b> The example here is using data from our 
        <a href="https://sandbox.genesys-pgr.org" target="_blank">test environment</a>.<br />
        The current release of the Javascript library is available on <a
          href="https://www.npmjs.com/package/@genesys-pgr/ui-embedded">npmjs.com</a>.</p>
    </div>
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link active" href="#/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#/overview">Overview</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#/cart">Cart</a>
      </li>  
      <li class="nav-item">
        <a class="nav-link" href="index.html">EN</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.html?es">ES*</a>
      </li>
    </ul>
  </div>
  <hr />
  <div class="container mb-5" id="genesys-container"></div>
  <hr />
  <div class="container">
    <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque cursus convallis fermentum. Fusce varius,
      massa ut dictum tempor, lacus eros eleifend eros, vel fringilla neque lacus sit amet lacus. Pellentesque habitant
      morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus condimentum tincidunt dolor at
      interdum. Mauris bibendum tellus quis leo finibus tempus. Nunc aliquam a ligula at mattis. Suspendisse tincidunt
      felis nec auctor ultrices.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha12/dist/genesys-deps.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha12/dist/genesys-ui.js"></script>
  <script type="text/javascript">
    // Detect language from query string
    const queryLang = document.location.search && document.location.search.substr(1) || undefined;

    // Embedded Genesys configuration
    const genesysConfig = {
      apiUrl: 'https://api.sandbox.genesys-pgr.org', // Genesys API server
      clientId: 'TDlQz.LUmnd6YIOtWr4kjnVEFi@api.sandbox.genesys-pgr.org', // Client ID
      clientKey: 'gnE1dPz5CWnbn0IsFvL8iSP1QDxBpmU0', // Client key
      title: 'Alliance genebanks:', // HTML title prefix
      filter: {
        institute: { code: ['COL003', 'BEL084'] }, // Genesys data filter
      },
      language: queryLang,
      accession: {
        pdci: true, // Show PDCI
        subsets: true, // Show list of subsets
        datasets: true, // Show list of datasets
      },
      shoppingCart: {
        enabled: true, // Enable shopping cart
      },
      recaptchaSiteKey: '6LeGp-oSAAAAAAszCIVxG-wPmoOmDtdIc9Wgrzar', // Public ReCaptcha site key
    };

    // Show UI
    genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig);

    // Or, to display ONLY "Collection Overview" use:
    // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig);
  </script>
</body>

</html>