# Front-end Integration
## [JavaScript Integration](https://docs.forter.com/extensions/front-end-integration#javascript-integration)
The full JS snippet for both production and sandbox environments can be found [here](https://portal.forter.com/app/integration/js-snippets "here")
The Forter JavaScript Snippet should be injected into the site footer section for all web pages. The following site template has been built:
int_forter/cartridge/templates/default/custom/fortersnippetjs.isml
When you add your **Site Id** and **Secret Key** to your cartridge settings, this .isml template will be configured. Please let your Forter onboarding team know once this has been added, so that they can complete the enablement remotely.
## [MFRA JavaScript](https://docs.forter.com/extensions/front-end-integration#mfra-javascript)
### [Include the Forter JavaScript snippet](https://docs.forter.com/extensions/front-end-integration#include-the-forter-javascript-snippet)
The Forter JavaScript Snippet should be injected into the checkout.isml and page.isml templates in your existing **app_storefront_base**. The instructions and code snippets are included below:
## [1) Update the checkout.isml template](https://docs.forter.com/extensions/front-end-integration#1-update-the-checkoutisml-template)
Update the checkout.isml template with the forterJS snippet. The exact path in the Forter SFCC cartridge is:
int_forter_mfra/cartridge/templates/default/common/layout/checkout.isml.
This extends the app_storefront_base/cartridge/templates/default/common/layout/checkout.isml template with:
```html
```
The full **checkout.isml** file is included below:
### [Full checkout.isml template](https://docs.forter.com/extensions/front-end-integration#full-checkoutisml-template)
```html
```
## [2) Update the page.isml template](https://docs.forter.com/extensions/front-end-integration#2-update-the-pageisml-template)
You should include the page.isml template with the forterJS snippet. The exact path in the Forter SFCC cartridge is:
int_forter_mfra/cartridge/templates/default/common/layout/page.isml.
This extends the app_storefront_base/cartridge/templates/default/common/layout/page.isml html template with the following code:
```html
```
The full **page.isml** file is included below:
### [Full page.isml file](https://docs.forter.com/extensions/front-end-integration#full-pageisml-file)
```html
```