> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.stylishcostcalculator.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# User Action Buttons: how to trigger them with HTML (buttons on page)

# Introduction

If you want to add additional buttons to your page that activate any of the User Action Buttons (Email Quote, Detailed List, Add To Cart, Coupon), please refer to the information below.

## Email Quote Button

```html
<a class="scc-trigger scc-email-quote-btn scc-usr-act-btns printTable-45" href="javascript:void(0)" onclick="initiateQuoteForm(4)">Email Quote</a>
```

## View Detailed List Button

```html
<a class="scc-trigger scc-detailed-list-btn scc-usr-act-btns scc-secondary-btn-style" href="javascript:void(0)" onclick="showQuoteDetailView(4)">Detailed List</a>
```

|||  **Note: **
||| You have to replace the (4) with your calculator ID. For example, replace "onclick="showQuoteDetailView(4)" with "onclick="showQuoteDetailView(20)" if your calculator ID is 20.


# Create A Button in Elementor

#### Step 1: Create a Button in Elementor

1. Open your page with Elementor.
2. Drag and drop the Button widget to the desired section of your page.

#### Step 2: Add an ID to the Button

1. Click on the Button widget to open the settings panel.
2. Go to the Advanced tab.
3.  Under Advanced, find the CSS ID field.
4. Enter a unique ID for your button, for example, quoteDetailButton.

#### Step 3: Apply Custom JavaScript

1. Go to the WordPress dashboard.
2. Navigate to Appearance > Customize.
3. Click on Additional CSS/JS or use a plugin like "Simple Custom CSS and JS" to add custom JavaScript.
4. Add the following JavaScript code, replace the '4' with your calculator ID:

#### JavaScript Code
```javascript
javascript
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('quoteDetailButton').addEventListener('click', function() {
showQuoteDetailView(4);
});
});
```

#### Summary

1. Create a Button in Elementor.
2. Add an ID to the button (quoteDetailButton).
3. Add custom JavaScript to trigger showQuoteDetailView(4) on button click.