# Elements

### Checkouts

By default SpiffyJS will automatically convert any links to your checkouts into popups on your page but you can also embed checkouts in-line as well using the checkout element:

```html
<spiffy-checkout url="https://example.spiffy.co/checkout/my-checkout"></spiffy-checkout>
```

**Properties**

* `url` (required) - the URL of the checkout you want to load in-line. Also accepts URL parameters for passing additional data to your checkout

**Compatibility Mode**

```html
<div class="spiffy-checkout__container" data-url="https://example.spiffy.co/checkout/my-checkout"></div>
```

### Portals

Embed customer and affiliate portals into your own pages with the portal element:

```html
<spiffy-portal type="customer"></spiffy-portal>
```

**Properties**

* `type` (default `customer`) - toggle the type of portal to embed. Valid values are `customer` or `affiliate`
* `token` (default `null`) - pass in an authentication token for single sign-on functionality. \
  \&#xNAN;*This requires an API connection with Spiffy to request customer portal tokens*

**Compatibility Mode**

```html
<div class="spiffy-portal__container" data-type="customer"></div>
```

### Affiliate Registration

Embed your affiliate registration form

```html
<spiffy-affiliate-register></spiffy-affiliate-register>
```

**Compatibility Mode**

```html
<div class="spiffy-affiliate-register__container"></div>
```


---

# 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://developers.spiffy.co/spiffyjs/elements.md?ask=<question>
```

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.