export const headerBackground = '/docs/images/headers/header_background.webp';
export const bentoLogoImg = '/docs/images/logos/bento-text-logo.svg'
export const LogoImg = '/docs/images/logos/four.svg'


# Bento Shift4Shop & 3D Cart Integration

<p />


## Overview

The Bento Shift4Shop & 3D Cart Integration offers two core functionalities:
- **Event Tracking**: Automatically track key Shift4Shop & 3D Cart events for your subscribers
- **Data Management**: Update user data and record lifetime value (LTV) metrics


## Requirements

1. An approved Bento account
2. A [Shift4Shop](https://www.shift4shop.com) account
3. The Bento tracking script - for user tracking on the website
4. Webhook endpoint - Syncs purchase events to Bento

## Tracking Script Installation


  
**1. In Shift4Shop**

  Head to the `Content -> Site Content` from the Shift4Shop menu.

  
**2. On the Site Content screen**

  Scroll to the bottom and you should see options for `Header & Footer`. Click that.

  
**3. Turn off WYSIWYG mode**

  When the header and footer editor opens, make sure to turn off the `WYSIWYG` mode as it can cause issues when you paste in the tracking code.

  
**4. Copy the Tracking Script**

  Copy the Tracking Script. If it asks you to replace the `site_uuid` with your site uuid, do so from the Bento Teams screen.

  
**5. Paste the Tracking Script**

  In the Global Header text field paste in the tracking code. Double check that it looks the same as what you copied from Bento. 

  
**6. Save the Header**

  Click `save` and you are done.


<hr />

## Webhook Setup


  
**1. In Shift4Shop**

  In the Shift4Shop menu select `Modules`

  
**2. On the Modules screen**

  In the search area type `webhooks`, and click `settings` button for the webhook module.

  
**3. Create a Webhook**

  When the webhook settings opens, you will want to click the `add webhook` button.

  
**4. Configure the Webhook**

  In the create webhook screen, you will want to name the webhook `Bento`

  
**5. Define the Event type**

  In the `events` drop down, select `order new`

  
**6. Set the Webhook URL**

  In the Webhook URL field, paste the Bento Webhook URL, be sure to substitute the `site_uuid` with
    the correct site you want to send events to from your account teams screen if it's not already there.

  
**7. Select the Format**

  Make sure the format selected is `json`

  
**8. Save the Webhook**

  Save your new connection


<hr />

## How the connection works
When a user browses shift4shop site, you will see `$page` data appear in Bento. Once that user authenticates that data
will be attributed to the correct subscriber in Bento. When the user makes a purchase we will sync the data via the
webhook you configured to appear as a purchase event in Bento. This interaction allows you to track LTV, start
automations and flows based on purchase events and more.