# Integration The colormass Exports feature can be used through a web component called `cm-material-download`. This enables you to directly use the download functionality without having to download or upload these assets that are defined in the previous page (Generating Exports ). ## Steps ### 1. Add an Import in the site's header In order to be able to use the exports component you need to add an import into the `
` HTML element, like so: {% code lineNumbers="true" %} ```html ... ... ``` {% endcode %} This only needs to be done once. ### 2. Add a button Now add a download button to your page. This must be an `a` tag. You can add arbitrary content, CSS classes and attributes to make this appear like any other button on your page. Your existing CSS rules will continue to apply. The `href` attribute can be either omitted or set to an arbitrary value. ```javascript Download ``` ### 3. Wrap the link Now wrap the `a` tag in a `cm-material-download` tag, providing the attributes described below. The link's `href` tag will be set automatically. If the required export cannot be found, the CSS class `disabled` will be set on the link. {% code lineNumbers="true" %} ```html Download ``` {% endcode %} You need to define the following attributes: * `organization-id`: This is a fixed `UUID` for your account (please ask your contact person if you are not sure). * `article-id`: This is the article ID `string` of the material. Since these are added on the platform manually, please ask the colormass staff if the corresponding range has the correct article IDs added before integrating them. * `type`: This is the type of the download. It has the following options: `pbr`, `tile`, `thumbnail`. * `file-type`: The desired file extension: `jpg` or `tiff`. * `resolution (PBR)` : `low` (72 DPI) or `high` (Original DPI) * `resolution`: The desired resolution, one of `low` (1000x1000px), `medium` (2000x2000px) or `high` (original size). Must be `high` unless the file type is `jpg`. Defaults to `high`. * `dimensions`: One of `7x7in`, `8x8in`, `9x9in`, `13_5x13_5in`, `16x16in`, `27x27in`, `32x32in`, `10x10cm`, `15x15cm`, `20x20cm`, `30x30cm`. Only provide if type is `thumbnail`. Defaults to `7x7in`. {% hint style="info" %} If you are not sure what these types above mean, please check the previous [Generating Exports](/dev/data-exporter/generating-exports.md) page. {% endhint %} ## Styling This component doesn't add any styling rules. The wrapped `a` tag can be styled freely. In most cases, it should automatically pick up any existing styling rules on the page, so that no extra steps are necessary. If you do want to customize the appearance of the link, you can simply add CSS classes or inline styles. See the following example: {% code lineNumbers="true" %} ```html Styled Download Button ``` {% endcode %} ## Example {% code lineNumbers="true" fullWidth="false" %} ```html Material Download Example ``` {% endcode %} If it's needed you can also set the attributes programmatically like you would with any HTML attribute. Just as an example using in pure Javascript: {% code lineNumbers="true" %} ```javascript var exampleElements = document.querySelectorAll('cm-material-download'); exampleElements.forEach(function(item, i){ item.setAttribute('article-id', '9999999'); }); ``` {% endcode %} {% hint style="info" %} The above example is just an example if you use frameworks or libraries this example would probably look different. {% endhint %} The HTML component lets you define any values, so you have to make sure that: * The **output** you are requesting is **available** on the colormass platform * The **article ID** is added to the material on the platform and uniquely identifies a material ![](/files/Ihe2ysHV9OpUwXu5lAkp) For example, if you request the download of Article ID 9999 with the following attributes: {% code lineNumbers="true" %} ```html Download Thumbnail (9" x 9") ``` {% endcode %} The download will not start because it doesn't have a 9in x 9in output. The `a` tag will additionally have the CSS class `disabled`, which you can use to provide feedback to the user. {% code lineNumbers="true" %} ```css a.disabled { cursor: not-allowed; } ``` {% endcode %} As an alternative to the `cm-material-download` web component, you can also generate download links directly using the colormass [GraphQL API](/dev/data-exporter/api-access.md). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.colormass.com/dev/data-exporter/integration.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.