r pkgdown docsearch algolia

I am having trouble understanding how to implement the docsearch snippet into my github pages (I am using bootstrap 3).

From the package documentation:

1. Once you have published your pkgdown website, submit the pkgdown site URL to Docsearch. DONE

2. Put the value of the apiKey and indexName parameters into your site _pkgdown.yml. DONE

Given my lack of knowledge, I am now having hard time understanding this.

The Docsearch\Algolia emailed me:

CSS

Copy this snippet at the end of the HTML head tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"/></pre></li>

JavaScript

Copy this snippet at the end of the HTML body tag

<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>

<script type="text/javascript">

  docsearch({

    appId: xxxxxx,

    apiKey: xxxxxx,

    indexName: xxxxxx,

    container: '### REPLACE ME WITH A CONTAINER (e.g. div) ###'

    debug: false // Set debug to true if you want to inspect the modal

  });

</script>

QUESTION: Shall I copy these snippets on every html page generated by pkgdown or there is an automatic way to do so?

According to the documentation, the best way to include custom HTML like this is to add it to your _pkgdown.yml file under these options:

template:
  includes:
    in_header: <!-- inserted at the end of the head -->
    after_body: <!-- inserted at the end of the body -->

So in your case, you should do something like this:

template:
  include:
    in_header: |
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"/></pre></li>
    after_body: |
      <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
      <script type="text/javascript">
        docsearch({
          appId: xxxxxx,
          apiKey: xxxxxx,
          indexName: xxxxxx,
          container: '### REPLACE ME WITH A CONTAINER (e.g. div) ###'
          debug: false // Set debug to true if you want to inspect the modal
        });
      </script>

Note that this feature was added about 4 months ago, so there's a chance it won't work with Bootstrap 3 or old versions of pkgdown. If this doesn't work, the old way of doing this was to:

• Add a folder called pkgdown/templates
• Add in-header.html and after-body.html in that folder
• Place your CSS code in in-header.html and your JavaScript in after-body.html
• Rebuild the site

I hope one of these works for you.