diff --git a/README.md b/README.md
index 4e190cf..708db3d 100644
--- a/README.md
+++ b/README.md
@@ -29,11 +29,15 @@
 ```
 -->
 ```html
-<vaadin-notification opened position="middle" duration="-1">
-  <template>
-    Your work has been saved
-  </template>
-</vaadin-notification>
+<vaadin-notification opened position="middle" duration="-1"></vaadin-notification>
+
+<script>
+  const notification = document.querySelector('vaadin-notification');
+
+  notification.renderer = function(root) {
+    root.textContent = 'Your work has been saved';
+  };
+</script>
 ```
 
 [<img src="https://raw.githubusercontent.com/vaadin/vaadin-notification/master/screenshot.png" width="336" alt="Screenshot of vaadin-notification">](https://vaadin.com/components/vaadin-notification)
diff --git a/vaadin-directory-description.md b/vaadin-directory-description.md
index 7f7c678..c3e79fc 100644
--- a/vaadin-directory-description.md
+++ b/vaadin-directory-description.md
@@ -11,9 +11,13 @@
 
 ## Example Usage
 ```html
-<vaadin-notification opened position="middle" duration="-1">
-  <template>
-    Your work has been saved
-  </template>
-</vaadin-notification>
+<vaadin-notification opened position="middle" duration="-1"></vaadin-notification>
+
+<script>
+  const notification = document.querySelector('vaadin-notification');
+
+  notification.renderer = function(root) {
+    root.textContent = 'Your work has been saved';
+  };
+</script>
 ```