diff --git a/docs/latest/deployment/recipes/embedded-viewer.md b/docs/latest/deployment/recipes/embedded-viewer.md
index 3018d97c2..c94027f15 100644
--- a/docs/latest/deployment/recipes/embedded-viewer.md
+++ b/docs/latest/deployment/recipes/embedded-viewer.md
@@ -16,16 +16,6 @@ include tags. Here's how it works:
Google Font: Roboto
-
react@16.8.6
-
- react-dom@16.8.6
-
- @ohif/viewer@latest
@@ -65,10 +55,15 @@ window.config = {
```js
// Made available by the `@ohif/viewer` script included in step 1
-var Viewer = window.OHIFStandaloneViewer.App;
-var app = React.createElement(Viewer, window.config, null);
-
-ReactDOM.render(app, document.getElementById('ohif-viewer-target'));
+var containerId = 'id-of-div-to-render-component-to';
+var componentRenderedOrUpdatedCallback = function() {
+ console.log('OHIF Viewer rendered/updated');
+};
+window.OHIFViewer.installViewer(
+ window.config,
+ containerId,
+ componentRenderedOrUpdatedCallback
+);
```
#### Tips & Tricks
@@ -91,8 +86,17 @@ Good. Now `embed` that new page using an
This should produce the expected result while also protecting your page from any
globally defined styles/scripts.
+> We're trying to embed the OHIF Viewer into an existing React App, but seeing
+> react-dom and react conflicts. What can we do?
+
+`installViewer` is a convenience method that pulls in some dependencies that may
+not be compatible with existing `react` apps. `@ohif/viewer` also exports `App`
+which is a react component that takes the `configuration` outlined above as
+props. You can use it as a reusable component, and to avoid `react` version
+conflict issues.
+
-[code-sandbox]: https://codesandbox.io/s/ohif-viewer-script-tag-usage-b3st9
+[code-sandbox]: https://codesandbox.io/s/ohif-script-tag-v103-iniiu