Documentation
Search…
Documentation
Development
Quickstart
Initialization
Embedding
Pages
Forms: Sending Data
Datasources: Fetching Data
Mapping Data
Custom event listeners
URL Parameters
Handling Errors
Security
Nesting Components
3rd-Party Integrations
reCAPTCHA
Stripe
Powered By
GitBook
Embedding
Learn how to include your Mason features in your application.
If you haven't already, run through our
developer quickstart
to get your development environment ready to use Mason.
Props
Mason features take a number of user-defined properties.
id
- a 24 byte string from the
Mason Builder
export modal (required)
​
willFetchData
- a function invoked before datasource fetching (optional)
​
willSendData
- a function invoked before form submission (optional)
​
didReceiveData
- a function invoked after form submission (optional)
React
Mason features use React under the hood, and integrate easily with a React codebase.
1
import
React
,
{
Component
}
from
'react'
;
2
import
{
Canvas
}
from
'@mason-api/react-sdk'
;
3
​
4
class
MyRegister
extends
Component
{
5
render
()
{
6
return
<
Canvas id
=
"YOUR_COMPONENT_ID"
/>
;
7
}
8
}
Copied!
HTML
If you're including Mason features as HTML Custom Elements, you must pass your props as data attributes.
1
<
html
>
2
<
head
>
3
<
script
src
=
"
https://static.trymason.com/
[email protected]
"
>
</
script
>
4
</
head
>
5
<
body
>
6
<
mason-canvas
data-id
=
"
YOUR_COMPONENT_ID
"
>
</
mason-canvas
>
7
</
body
>
8
</
html
>
Copied!
Because you can't pass functions as HTML attributes, you must use event subscribers to utilize callbacks with your HTML feature. See
Sending Data,
Fetching Data,
and
Handling Errors
for examples.
Development - Previous
Initialization
Next - Development
Pages
Last modified
3yr ago
Copy link
Contents
Props
React
HTML