> ## Documentation Index
> Fetch the complete documentation index at: https://docs.locadapt.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Local Development

> Learn how to set up Locadapt for local development and testing

If you are a developer looking to integrate Locadapt into your local development workflow or test on non-production domains, follow these steps:

## Adding Locadapt to your `localhost` project

<AccordionGroup>
  <Accordion icon="code" title="Add Locadapt scripts">
    To use Locadapt in your local development environment, add these two script tags to the `<head>` of your HTML file:

    ```html theme={null}
    <link rel="stylesheet" href="https://cdn.locadapt.com/locadapt.min.css" />
    <script
      src="https://cdn.locadapt.com/locadapt.min.js"
      data-project-id="YOUR_PROJECT_ID"
    ></script>
    ```

    You can find these scripts ready to copy, along with your project ID, on [the Configuration page](https://app.locadapt.com/configuration) for your Locadapt project.
  </Accordion>

  <Accordion icon="key" title="Set up local development key">
    To enable Locadapt on localhost or other non-production domains:

    1. Navigate to the Configuration page in your Locadapt dashboard.
    2. Find the "Local Development" section with a JavaScript snippet containing your secret key.
    3. Copy and run this snippet in your browser's console while on your local development site:

    ```javascript theme={null}
    const d = new Date();
    d.setTime(d.getTime() + 365.2422 * 10 * 24 * 60 * 60 * 1000);
    const expires = "expires=" + d.toUTCString();
    const cookieName = "locadapt-secret-key";
    const cookieValue = "YOUR_SECRET_KEY";
    const cookieString = 
        `${cookieName}=${cookieValue};${expires};path=/;SameSite=Strict;`;

    if (window.location.protocol === "https:") {
        document.cookie = cookieString + "Secure;";
    } else {
        document.cookie = cookieString;
    }

    console.log(`Secret key cookie set: ${cookieName}`);
    ```

    Replace `YOUR_SECRET_KEY` with your actual secret key or copy the entire snippet directly from your dashboard.

    This sets a cookie allowing Locadapt to function on test domains.
  </Accordion>
</AccordionGroup>

## Deploying to production

When deploying Locadapt to your own production site:

1. Navigate to the Configuration page in your Locadapt dashboard.
2. Go to the "Options" tab.
3. Configure the allowed domains for your project (similar to CORS settings).
4. You won't need to use the secret key for your own production domains.

## Testing on foreign production sites

<AccordionGroup>
  <Accordion icon="globe" title="Testing on live sites you don't own">
    For testing Locadapt on live production sites that you don't own or control (such as for client demos or our own demonstrations), you can use a browser extension similar to Tampermonkey:

    1. Install the [Tampermonkey](https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) extension for Chrome (or a similar extension for your browser).
    2. Contact Locadapt support for a compatible user script.
    3. Install the script into Tampermonkey.
    4. Add your API key to the site's `localStorage` (same as optional step 3, local development, on [the configuration page](https://app.locadapt.com/configuration)).
    5. Enable the script when visiting the site.

    This method injects Locadapt into any site for demonstration purposes without affecting the actual site for other users.
  </Accordion>
</AccordionGroup>

## Best practices

<CardGroup>
  <Card title="Use version control" icon="code-branch">
    Track changes and collaborate by keeping your Locadapt configuration in version control.
  </Card>

  <Card title="Secure your key" icon="user-secret">
    Never commit or share your local development key. Use environment variables or secure vaults for sensitive information.
  </Card>

  <Card title="Stay updated" icon="arrow-up-right-dots">
    Regularly check for updates to Locadapt's scripts and documentation for the latest features and best practices.
  </Card>

  <Card title="Leverage our support" icon="headset">
    Reach out to our dedicated support team for any questions or assistance during your development process.
  </Card>
</CardGroup>

For more detailed information on integrating Locadapt into your development workflow, reach out to the team or check out the [API Reference](/details/api-reference) page.
