---
title: "Advanced Usage"
canonical_url: "http://localhost/spaces/advanced-usage"
---
# Advanced Usage

## Configuration

Spaces can be configured using attributes on the `<script>` element. The following attributes are supported:

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        data-target
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
      
       The ID of the element where the Space will be embedded
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-space-id
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-locale
      </code>
    </td>
    
    <td>
      <code>
        de
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
      
       Either <code>
        en
      </code>
      
       or <code>
        de
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-param-namespace
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
      
       Scope the query parameters for the Space
    </td>
  </tr>
</tbody>
</table>

<note>

`data-param-namespace` is optional. You usually only need it if you want to avoid conflicts with other URL parameters. The namespace is prepended to all URL parameters used by the Space, separated by a colon. For example, if you set `data-param-namespace="stafftastic"`, the occupation filter will be stored in the URL as `stafftastic:filter[occupation_group_ids]` instead of just `filter[occupation_group_ids]`.

</note>

<warning>

`data-locale` will not change the language of the Space if the user has a different language preference set in their browser. It will only be used as a fallback if no preference is set or a preference is set that is not supported by the Space.

</warning>

## Query parameters

<table>
<thead>
  <tr>
    <th>
      Query Parameter
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        page[number]
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          number
        </span>
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter[distance]
      </code>
    </td>
    
    <td>
      <code>
        25000
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          number
        </span>
      </code>
      
       Search radius in meters
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter[latitude]
      </code>
    </td>
    
    <td>
      Defined on the space
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          number
        </span>
      </code>
      
       Latitude of the search origin
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter[longitude]
      </code>
    </td>
    
    <td>
      Defined on the space
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          number
        </span>
      </code>
      
       Longitude of the search origin
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter[location]
      </code>
    </td>
    
    <td>
      Defined on the space
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
      
       Human-readable label for the search location
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter[from]
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
      
       Start of the date range filter, ISO 8601 date (e.g. <code>
        2024-01-01
      </code>
      
      )
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter[to]
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
      
       End of the date range filter, ISO 8601 date (e.g. <code>
        2024-12-31
      </code>
      
      )
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter[occupation_group_ids]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
        
        <span class="sTEyZ">
          []
        </span>
      </code>
      
       Repeatable. Filter by occupation group IDs
    </td>
  </tr>
  
  <tr>
    <td>
      <del>
        <code>
          filter[range][distance]
        </code>
      </del>
    </td>
    
    <td>
      <strong>
        Deprecated
      </strong>
      
       — use <code>
        filter[distance]
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          number
        </span>
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <del>
        <code>
          filter[range][position][latitude]
        </code>
      </del>
    </td>
    
    <td>
      <strong>
        Deprecated
      </strong>
      
       — use <code>
        filter[latitude]
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          number
        </span>
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <del>
        <code>
          filter[range][position][longitude]
        </code>
      </del>
    </td>
    
    <td>
      <strong>
        Deprecated
      </strong>
      
       — use <code>
        filter[longitude]
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          number
        </span>
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <del>
        <code>
          filter[date][from]
        </code>
      </del>
    </td>
    
    <td>
      <strong>
        Deprecated
      </strong>
      
       — use <code>
        filter[from]
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <del>
        <code>
          filter[date][to]
        </code>
      </del>
    </td>
    
    <td>
      <strong>
        Deprecated
      </strong>
      
       — use <code>
        filter[to]
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
    </td>
  </tr>
</tbody>
</table>

<note>

These query parameters will be prefixed with the `data-param-namespace` if it is set. For example, if `data-param-namespace="stafftastic"`, the occupation group filter will be stored in the URL as `stafftastic:filter[occupation_group_ids]` instead of just `filter[occupation_group_ids]`.

</note>


## Sitemap

See the full [sitemap](http://localhost/sitemap.md) for all pages.