D.6 HTML widgets

We do not recommend that you use different HTML widgets from many R packages on the same page, because it is likely to cause conflicts in JavaScript. For example, if your theme uses the jQuery library, it may conflict with the jQuery library used by a certain HTML widget. In this case, you can conditionally load the theme’s jQuery library by setting a parameter in the YAML metadata of your post and revising the Hugo template that loads jQuery. Below is the example code to load jQuery conditionally in a Hugo template:

{{ if not .Params.exclude_jquery}}
<script src="path/to/jquery.js"></script>
{{ end }}

Then if you set exclude_jquery: true in the YAML metadata of a post, the theme’s jQuery will not be loaded, so there will not be conflicts when your HTML widgets also depend on jQuery.

Another solution is the widgetframe package (Karambelkar 2017). It solves this problem by embedding HTML widgets in <iframe></iframe>. Since an iframe is isolated from the main web page on which it is embedded, there will not be any JavaScript conflicts.

A widget is typically not of full width on the page. To set its width to 100%, you can use the chunk option out.width = "100%".

References

Karambelkar, Bhaskar. 2017. Widgetframe: Htmlwidgets in Responsive Iframes. https://CRAN.R-project.org/package=widgetframe.