diff --git a/README.md b/README.md
index 1c19618..9906122 100644
--- a/README.md
+++ b/README.md
@@ -145,6 +145,8 @@ In order to render the email you would then call: `FunctionTemplate.render(first
### Using Components
+**Static components**
+
In addition to compiling single MJML EEx templates, you can also create MJML partials and include them
in other MJML templates AND components using the special `render_static_component` function. With the following
modules:
@@ -201,15 +203,50 @@ cannot use any assigns that would bee to be evaluated at runtime. For example, t
```
+**Dynamic components**
+
If you need to render your components dynamically, use `render_dynamic_component` instead and be sure to configure your
-template module like so to generate the email HTML at runtime:
+template module like below to generate the email HTML at runtime. First, you create your component, for example, `MyTemplate.CtaComponent.ex`:
```elixir
-def MyTemplate do
- use MjmlEEx, mode: :runtime
+def MyTemplate.CtaComponent do
+ use MjmlEEx.Component, mode: :runtime
+
+ @impl MjmlEEx.Component
+ def render(assigns) do
+ """
+
+ #{assigns[:call_to_action_text]}
+ #{assigns[:call_to_action_link]}
+
+ """
+ end
end
```
+then, in your MJML template, insert it using the `render_dynamic_template_component` function:
+
+```html
+
+
+
+
+
+ <%= render_dynamic_component MyTemplate.CtaComponent
+ %{call_to_action_text: "Call to action text", call_to_action_link:
+ "#{@cta_link}"} %>
+
+
+
+
+```
+
+In your `UserNotifier` module, or equivalent, you render your template, passing any assigns/data it expects:
+
+```Elixir
+WelcomeEmail.render(call_to_action_text: call_to_action_text, call_to_action_link: call_to_action_link)
+```
+
### Using Layouts
Often times, you'll want to create an Email skeleton or layout using MJML, and then inject your template into that