# Implement custom buttons

From time to time it is necessary to implement custom buttons outside of our configurator which are interacting with the Rubens configurator. With our fully API based approach this is perfectly possible.

Even tough we show you how to implement a custom Add to Cart button it is possible to create buttons with all of our [API methods](#helpful-links). For example you can hide all of our buttons (find documentation [here](https://docs.roomle.com/rubens/rubens-products/rubens-configurator/customisation/enable-disable-buttons)) and create your own styled user interface - before you do this we strongly recommend to get in touch with our[ SDK based approach](https://docs.roomle.com/rubens/rubens-sdk/overview).

### Trigger Request Product button example

As an example we want to show it with our call to action button the Add to Cart button, because it is probably the most important button, since it creates a customer lead, therefore it could be useful to implement you fully custom own button and trigger the request product action from outside. Therefore we provide the method `triggerRequestProduct`. When you call this method the same process starts as if the user would have clicked on the checkout-call-to-action button. This means that you only need to subscribe to the `onRequestProduct` callback to handle those situations.

```javascript
const configurator = await RoomleConfiguratorApi.createConfigurator(
  'demoConfigurator',
  document.getElementById('configurator-container'),
  options,
);
configurator.ui.callbacks.onRequestProduct = (configurationId, image, partlist, price, labels, configuration) => {
  console.log(configurationId, image, partlist, price, labels, configuration);
};
document.getElementById('trigger-request').addEventListener('click', async () => {
  await configurator.ui.triggerRequestProduct();
  console.log('trigger-request-done');
});
```

If you want to learn how to listen to the `request product event` have a look in this section: [Request Product](https://docs.roomle.com/rubens/rubens-products/rubens-configurator/integration/listen-to-events/request-a-product).

### Code Sandbox

Dig deeper into the example above and have a look into this [Code Sandbox](https://codesandbox.io/p/sandbox/naughty-sea-9fnkfd).

### Helpful links

Rubens UI API functions: [exposed\_api.exposedapi](https://docs.roomle.com/rubens/rubens-products/rubens-products-reference/classes/exposed_api.exposedapi "mention")\
Rubens SDK API functions: [configurator\_core\_src\_roomle\_configurator.default](https://docs.roomle.com/rubens/rubens-sdk/rubens-sdk-reference/classes/configurator_core_src_roomle_configurator.default "mention")


---

# 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/integration/call-3d-scene-functions/trigger-request-product-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.