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

# Quickbutik

> Connect your Quickbutik store for automatic widget installation, product search, and order tracking

Connect your Quickbutik storefront to BubblaV with an API key so customers can search visible products, check product details, and look up orders in chat. BubblaV also attempts to install the chat widget automatically when you connect.

## Why Connect Quickbutik?

<CardGroup cols={3}>
  <Card title="Automatic Installation" icon="bolt">
    Connect with an API key and let BubblaV attempt widget installation, with a manual fallback if needed.
  </Card>

  <Card title="Product Answers" icon="magnifying-glass">
    Help shoppers discover visible products and ask about prices, stock, and product details.
  </Card>

  <Card title="Order Support" icon="truck">
    Look up order status with an order number and matching checkout email, or find recent orders by email.
  </Card>
</CardGroup>

## Prerequisites

* A BubblaV website for your Quickbutik storefront, with edit access
* A Quickbutik store whose owner can generate and use an API key

## Setup Steps

<Steps>
  <Step title="Create or select your website">
    Create or select the BubblaV website for your Quickbutik storefront.
  </Step>

  <Step title="Generate an API key">
    Have the store owner generate an API key in **Quickbutik Control Panel** → **Settings** → **API**.
  </Step>

  <Step title="Connect Quickbutik">
    Open that website's **Dashboard** → **Integrations** → **Quickbutik**, click **Connect**, paste the key into **Quickbutik API Key**, and submit.
  </Step>

  <Step title="Check connection and installation separately">
    BubblaV validates the key, provisions product and order tools, and attempts to install the widget automatically. A **Connected** status alone does not prove that widget installation or tool provisioning succeeded.
  </Step>

  <Step title="Verify your live storefront">
    Open the live storefront and confirm a single chat bubble. Test a visible product keyword, then a real order number with its matching checkout email. If the widget is missing, follow the manual fallback below. Do not add another snippet over an already working widget.
  </Step>
</Steps>

## Manual Installation (Fallback)

Use this only if the widget is missing after checking your live storefront.

<Steps>
  <Step title="Copy your widget snippet">
    Open **Installation** for your BubblaV website and copy its widget snippet. Never put your Quickbutik API key in the snippet.
  </Step>

  <Step title="Back up and open your theme">
    Back up the Quickbutik theme, then open **Utseende** → **Tema** → **Kod under huven**. See [Quickbutik's template structure documentation](https://quickbutik.dev/theme-development/template-structure).
  </Step>

  <Step title="Add the snippet to the shared layout">
    Place the snippet before the closing `</body>` tag of the shared storefront layout. If your theme does not expose a shared body or layout, ask Quickbutik support for theme-specific placement instead of guessing a filename.
  </Step>

  <Step title="Apply and check the storefront">
    Save and apply the theme change, then check the live storefront for a single chat bubble.
  </Step>
</Steps>

<Warning>
  Do not install a duplicate snippet over an already working widget. Manual installation adds chat only: product and order access still requires the API-key connection. Disconnecting attempts to remove API-managed scripts on a best-effort basis, but does not remove manually pasted theme code. Remove that code separately when uninstalling.
</Warning>

## Available Tools After Connection

| Tool                         | Parameters and Behavior                                                                                                                     | Example Query                                                                                      |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `quickbutik_track_order`     | Required `order_identifier` and `customer_email`. Returns order status and tracking when supplied; the email must match the checkout email. | Ask where a real order number from your store is, and supply that order's matching checkout email. |
| `quickbutik_search_products` | Optional `keyword` and optional numeric `limit`. Searches visible products.                                                                 | "Show me your candles"                                                                             |
| `quickbutik_get_product`     | Required `product_id`. Accepts a raw ID or an explicit reference from a previous search, such as `#3`.                                      | "Tell me about product #3" after a search.                                                         |
| `quickbutik_customer_orders` | Required `customer_email`. Returns recent orders matching that email, not unlimited order history.                                          | Ask for recent orders using a real customer's checkout email.                                      |

## Test Your Integration

Try these queries in your storefront chat:

* "Show me your candles" — replace candles with a keyword matching a visible product in your store.
* "Tell me about product #3" — first run a search and use a reference that appeared in its results.
* Ask for the status of a real merchant order number and provide the matching checkout email.
* Ask for recent orders using an email that has orders in the connected store.

Email matching checks the supplied email against the order; it does not prove ownership of that email address.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Invalid or revoked API key">
    Have the store owner generate a valid key and connect again. If the integration is already connected, use the existing Quickbutik card to disconnect, then reconnect with the new key.
  </Accordion>

  <Accordion title="Widget missing despite Connected status">
    Check the live storefront first. Connection success does not guarantee widget installation. If the chat bubble is missing, follow the manual fallback above; there is no widget-install retry button. Do not add a duplicate snippet if the widget is already working.
  </Accordion>

  <Accordion title="Order not found">
    Confirm the order belongs to the connected store, the order number is correct, and the supplied email matches its checkout email. Order tracking requires both the order number and matching email.
  </Accordion>

  <Accordion title="Products or tools missing">
    Check that your products are visible and that your keyword matches them. In the integration's configuration, check that the required tools are enabled. Use **Sync Tools** if provisioning did not complete. Run a product search before using references such as `#3`.
  </Accordion>
</AccordionGroup>

<Info>
  **Security**: Keep your API key private and enter it only in the connection dialog, never in storefront code or chat. The four chatbot commerce tools read product and order data, but setup writes storefront scripts, so the credential is not read-only. Order lookups match the supplied checkout email; this is not email-ownership verification.
</Info>

## Next Steps

<CardGroup cols={2}>
  <Card title="Customize Your Widget" icon="palette" href="/user-guide/widget-design">
    Match the chat widget to your storefront's appearance.
  </Card>

  <Card title="Test Your Chatbot" icon="flask" href="/user-guide/testing">
    Check product answers, order lookups, and your configured website knowledge.
  </Card>
</CardGroup>