chore: update docs to include info for embedding (#42)

Author: smeijer

README.md

@@ -1,4 +1,4 @@
-# Testing-Playground ([demo])
+# Testing-Playground ([demo][playground])
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 
@@ -14,8 +14,60 @@ Testing-Library makes it easy to get started with testing. But even then, it can
 
 Testing-Playground provides you with direct feedback. Trying to visualize the direct impact of adding and removing specific (aria) attributes. All to give you some visual support while learning about the importance of aria roles, labels, and attributes.
 
-[testing-library/dom]: https://testing-library.com/docs/dom-testing-library/example-intro
-[demo]: https://testing-playground.com
+## Embedding
+
+[Testing-Playground][playground] can also be embedded. There is are two embed modes. Manual integration, and `oembed`.
+
+### Oembed
+
+To get started with `oembed`, you'll simply need to copy / paste your direct playground links into a supporting platform.
+
+### Manual integration ([demo][embed-demo])
+
+Follow the following steps if you wish to have an interactive playground on your website.
+
+Add the following snippet directly before your closing `</body>` tag:
+
+```html
+<script async src="https://testing-playground.com/embed.js"></script>
+```
+
+Create a template element, in which you add to `script` tags. One for `html` and one for `javascript`. Make sure to type them correctly, as that's the what that our embedder uses to populate the different panes.
+
+Note that the `data-testing-playground` attribute is required as well.
+
+```html
+<template data-testing-playground>
+  <script type="text/html"></script>
+
+  <script type="text/javascript"></script>
+</template>
+```
+
+Now, you can populate the `html` and `javascript` elements:
+
+```html
+<template data-testing-playground>
+  <script type="text/html">
+    <button>one</button>
+  </script>
+
+  <script type="text/javascript">
+    screen.getByRole('button');
+  </script>
+</template>
+```
+
+#### options
+
+To configure your playground even further, add one or more of the following attributes to your opening `<template>` tag. Note, don't remove the `data-testing-playground` attribute!
+
+| attribute    | type                                               | default                                  | description                                     |
+| ------------ | -------------------------------------------------- | ---------------------------------------- | ----------------------------------------------- |
+| data-panes   | [markup &#124; preview &#124; query &#124; result] | ['markup', 'preview', 'query', 'result'] | which panes to show, and in what order          |
+| data-height  | number &#124; string                               | 300                                      | height of the element                           |
+| data-width   | number &#124; string                               | '100% '                                  | width of the element                            |
+| data-loading | eager &#124; lazy                                  | 'lazy'                                   | load the frame eager or lazy (see iframe specs) |
 
 ## Roadmap
 
@@ -58,6 +110,9 @@ Thanks goes to these people ([emoji key][emojis]):
 This project follows the [all-contributors][all-contributors] specification.
 Contributions of any kind welcome!
 
+[testing-library/dom]: https://testing-library.com/docs/dom-testing-library/example-intro
+[playground]: https://testing-playground.com
+[embed-demo]: https://codepen.io/smeijer/pen/yLYWZmK
 [roadmap.md]: https://github.com/smeijer/testing-playground/blob/master/ROADMAP.md
 [contributing.md]: https://github.com/smeijer/testing-playground/blob/master/ONTRIBUTING.md
 [issue tracker]: https://github.com/smeijer/testing-playground/issues