The embed is configured using the Embed Settings in the Admin.
You're able to enable/disable various options or adjust the theme without having to write any code.
Our embed code is a single line and typically looks like:
<script src="//cdn.static.tools/v1/commerce.js" data-key="VlWw8jlSw2:64cc70ba48" data-env="test" data-modules="ui:analytics:button" data-ui-theme="#32d5a1:90:15:15:1234" defer></script>
To install the embed on your website,
copy it from within the Embed Settings and then
paste it into the source code of your site.
The code should be inserted into a location that is shared by all of the pages that you would like Commerce to be available on.
On most sites the best location is a shared master template or a shared footer template.
If you're having trouble determining the right spot for your site, reach out to us.
The data-attributes within the embed provide instantaneous configuration that reduce the time it takes for Commerce to become visible and functional within the page.
Thanks to the Embed Settings you should not need to edit these values manually.
The data-key attribute is a unique id that sets the account to process orders through.
This is what identifies your specific site and allows us to route purchases to your account.
The data-env attribute sets if Commerce is running in
test mode is for when your site is in development and need to run simulated orders.
live mode is for when your site is performing real transactions.
The data-modules attribute defines additional optional Modules.
The default embed for Commerce uses the following modules:
The ui module enables the default User Interface.
It is visually configured by the data-ui-theme attribute.
The analytics module enables the pre-built Analytics Integrations.
The button module enables data-attribute based "Add to Cart" buttons within the page.
The data-ui-theme attribute sets the visual configuration for the User Interface.
It is automatically generated by the Embed Settings in the format:
The value is a colon
: separated list, where property is: