> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-components/embed.md).

# Embed ✅

Mutates Embed content to expand custom macros with attribute or component property values.

### Overview

{% embed url="<https://www.loom.com/share/270e9dce6762410dad582cab1739257e>" %}

## Usage Notes&#x20;

1. Drop your Embed element on the page
   1. Create the content you want
   2. Where you want custom-inserted values, use the format `{{wf name}}` where `name` is your own chosen name.  No spaces, but hyphens and underscores are permitted.&#x20;
   3. On the Embed element itself, add a custom attribute for each name.  If you have an embedded field called `bob` , create an attribute named `bob` . The value is what will be inserted inside of your Embed content.&#x20;
2. Create a Component from your Embed element&#x20;
   1. Bind your custom attribute value to a new property on your Component
   2. Set those properties, or bind them ( Collection page, collection list, parent component... )&#x20;
3. Add the Sygnal Embed code component to the page&#x20;
   1. Move your Component into the Embed code component slot&#x20;

*Done!* &#x20;

The code component will now handle the mutation of the property-bound attributes into your Embed content automatically.&#x20;

## Technical Notes

Examples of Webflow's native syntax;

{% code overflow="wrap" %}

```
<li>{{wf {"path":"name","type":"PlainText"} }}</li>
<li>{{wf {"path":"description","type":"PlainText"} }}</li>
<li>{{wf {"path":"latitude","type":"Number"} }}</li>
<li>{{wf {"path":"fullSlug","type":"FullSlug"} }}</li>
<li>{{wf {"path":"created-on","transformers":[{"name":"date","arguments":["MMM DD, YYYY"]}],"type":"Date"} }}</li>
```

{% endcode %}