# Implement custom AR button

**Overview:**

Roomle's AR functionality leverages the native AR frameworks of iOS (AR Quick Look) and Android (Google Scene Viewer). Therefore, the implementation of an AR button must be device-dependent.

1. **Device Detection:** First, determine if the user is accessing the page with an iOS, Android, or Desktop device.
2. **Fetching Data:** Depending on the device, the appropriate 3D model (USDZ for iOS, glTF/GLB for Android) is fetched via the Roomle API.
3. **Launching AR View:**
   * **iOS:** The USDZ model is opened directly in the AR Quick Look viewer.
   * **Android:** A specific Intent link is constructed and invoked to launch the GLB model in the Google Scene Viewer.
   * **Desktop:** A QR code is displayed, linking to a mobile landing page. This page then performs steps 1-3 for mobile devices.

**Prerequisites:**

* You need a valid `configurationId` for the Roomle product you want to display in AR.

You have to save the configuration to get the [configurationID](https://docs.roomle.com/rubens/rubens-sdk/rubens-sdk-reference/classes/configurator_core_src_roomle_configurator.default#savecurrentconfiguration):

```typescript
await RoomleConfigurator.extended.saveCurrentConfiguration();
```

**Implementation Details:**

**1. Device Detection:**

Implement logic (e.g., using JavaScript `navigator.userAgent` or a suitable library) to identify the user's operating system. You need to differentiate between iOS, Android, and others (Desktop).

**2. Fetching 3D Assets:**

Use the following Roomle API V2 endpoints to get the URLs for the required 3D files. Replace `:configurationId` with the ID of your configuration.

* **For iOS (USDZ):**

  JavaScript

  ```typescript
  /**
   * Generates the URL to fetch the USDZ file for a given configuration ID.
   * @param {string} configurationId - The ID of the Roomle configuration.
   * @returns {string} The full URL to the USDZ file.
   */
  const getUsdzUrl = (configurationId) => {
    return (
      'https://api.roomle.com/v2' +
      '/configurations/' +
      configurationId +
      '/3dAssets/usdz/conf.usdz'
    );
  };
  ```
* **For Android (GLB):**

  JavaScript

  ```typescript
  /**
   * Generates the URL to fetch the GLB file (glTF Binary) for a given configuration ID.
   * @param {string} configurationId - The ID of the Roomle configuration.
   * @returns {string} The full URL to the GLB file.
   */
  const getGlbUrl = (configurationId) => {
    return (
      'https://api.roomle.com/v2' +
      '/configurations/' +
      configurationId +
      '/3dAssets/glTF/conf.glb'
    );
  };
  ```

**3. Launching AR View:**

* **iOS Implementation:**
  1. Call `getUsdzUrl(configurationId)` to get the URL for the USDZ file.
  2. Redirect the browser directly to this URL. iOS recognizes the `.usdz` extension and automatically opens the AR Quick Look viewer.JavaScript

     ```typescript
     // Example:
     const usdzUrl = getUsdzUrl('YOUR_CONFIG_ID');
     window.location.href = usdzUrl; // Or use an equivalent method in your framework
     ```
* **Android Implementation:**
  1. Call `getGlbUrl(configurationId)` to get the URL for the GLB file.
  2. Construct the following Intent link. **Important:** The `glbUrl` must be URL-encoded before being inserted into the intent string.JavaScript

     ```typescript
     // Example:
     const glbUrl = getGlbUrl('YOUR_CONFIG_ID');
     const encodedGlbUrl = encodeURIComponent(glbUrl); // Important: Encode the URL!

     const intentUrl =
      'intent://arvr.google.com/scene-viewer/1.0?file=' +
       glbUrl +
       '&mode=ar_only' +
       '&resizable=false' +
       '&enable_vertical_placement=true' +
       '#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;end;'

     window.location.href = intentUrl; // Or use an equivalent method
     ```
  3. When this Intent link is invoked, Android opens the Google Scene Viewer with the 3D model.
* **Desktop Implementation:**
  1. If a desktop device is detected, display a QR code instead of a direct link.
  2. The QR code should encode a URL pointing to a specially created mobile landing page (e.g., `https://your-domain.com/ar-mobile?configId=YOUR_CONFIG_ID`).
  3. On this mobile landing page, perform the device detection again (Step 1) and then trigger the appropriate iOS or Android implementation (Step 3).
  4. You can use JavaScript libraries (like `qrcode.js`) to dynamically generate the QR code in the browser, or create it server-side.


---

# 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.roomle.com/rubens/rubens-products/rubens-configurator/recipes/implement-custom-ar-button.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.