Issue 5692 - Create Browser Selector with Browser Detection Component for help.eyeo.com

templates/article.tmpl

 {% extends "templates/minimal" %}
 
 {% set product = products[product_id] %}
 
 {% block body %}
 <nav aria-label="{{ "Breadcrumb" | translate("breadcrumb-label", "Label") }}" class="breadcrumb">
   <ol class="container large-desktop-width clearfix" itemscope itemtype="http://schema.org/BreadcrumbList">
     <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
       <a class="has-pre-icon" itemscope itemtype="http://schema.org/Thing" itemprop="item" href="{{ product.slug }}">
         <span class="pre-icon" style="{{ get_inline_bg('logo-'+product_id) }}"></span>
@@ skipping 10 matching lines @@
   </ol>
 </nav>
 
 <main id="main" class="container clearfix">
   <article class="article card {{ product_id }}-card section column two-thirds">
     <header class="article-heading">
       <h1 class="has-pre-icon">
         <span class="pre-icon" style="{{ get_inline_bg('logo-'+product_id) }}"></span>
         {{ title | translate( get_page_name(page) + "-title", "Article title") }}
       </h1>
-    </header>
-
+    </header>    
+      
     {% if hide_browser_selector is not defined %}
     <div class="article-browser-selector">
-      [Browser selector]
+      <? include browser-select ?>
     </div>
     {% endif %}
 
     <div class="article-body content">
         {{ body | safe }}
     </div>
   </article>
   <aside class="section column one-third">
     <? include product-topics-accordion ?>
   </aside>
 </main>
 
 <script id="no-content-for-platform-message" type="text/template">
   <p>{{ "Unfortunately, there is no content specific for your current browser. Please use the dropdown menu above to choose a different browser." | translate("no-content-for-platform-message", "paragraph") }}</p>
 </script>
+
+<script src="/js/vendor/bowser.js"></script>
 {% endblock %}
 
 {% block footer %}
 <? include contact ?>
 {% endblock %}