# Step by Step to your Front-End Integration

Ensure that all [prerequisites for successful front-end integration](/product-discovery/getting-started/fhr-integration-checklist.md#before-you-begin-4) are met before you begin.

{% stepper %}
{% step %}

#### Choose an integration method

To connect to the [Fredhopper Query API](/product-discovery/building-the-front-end-experience-with-fhr/what-is-the-query-api.md) you can use either the [SOAP interface](/product-discovery/building-the-front-end-experience-with-fhr/sending-queries.md#soap-wsdl) or the [REST interface](/product-discovery/building-the-front-end-experience-with-fhr/sending-queries.md#rest-xml-json) with either XML or JSON reponses.

For more information see also [Front-End Integration Best Practice](/product-discovery/building-the-front-end-experience-with-fhr/best-practice/integration-best-practices.md).
{% endstep %}

{% step %}

#### Understand your use cases

**Identify all areas** in your webshop where **Fredhopper can be utilized**, such as search, navigation or merchandising. Which parts of the shopper's journey (i.e. browse, search, refine, sort-by) will be powered by Fredhopper?

{% hint style="success" %}
If you are working on your Fredhopper implementation together with Crownpeak, your technical consultant will have mapped out the use cases with you in the [preparation phase](/product-discovery/getting-started/fhr-integration-checklist.md#prepare-for-integration-1).
{% endhint %}

For each context:

* **Identify the types of queries you have to send** (see [Sending Queries to the Query API](/product-discovery/building-the-front-end-experience-with-fhr/sending-queries.md) and [Constructing Queries](/product-discovery/building-the-front-end-experience-with-fhr/fredhopper-query-language.md)).
* **Determine the context parameters** for your query (see [Constructing Queries](/product-discovery/building-the-front-end-experience-with-fhr/fredhopper-query-language.md)).

Lastly, ensure that **all necessary information is available** to populate the required parameters and correctly formulate the required queries, e.g. consistent category IDs and parent categories.
{% endstep %}

{% step %}

#### Try out queries

Using a tool such as Postman, **send sample queries** to the Fredhopper Query API to identify any potential issues by taking a **close look at the responses** (see [Understanding the FHR Query Response](/product-discovery/building-the-front-end-experience-with-fhr/understanding-the-fhr-query-response.md))**:**

* Does it include the facets, breadcrumbs, items-section, themes/campaigns as expected?
* Are all the display fields and attribute types you need present?

{% hint style="warning" %}
[Display fields](https://support.crownpeak.com/hc/en-us/articles/11135780373661-FHR-How-to-see-the-same-item-attributes-in-published-and-pre-published-pages) are defined in the Merchandising Studio (*System > Display fields*).
{% endhint %}

* Is there any excess information that you do not need in your front-end?

{% hint style="success" %}
You can [**suppress any excess response content**](/product-discovery/building-the-front-end-experience-with-fhr/fredhopper-query-language.md#front-endintegrationspecification-suppressingresponseelements) not needed in the front-end to improve performance. Note that [only certain information can be suppressed](https://support.crownpeak.com/hc/en-us/articles/11135737406237-Fredhopper-Query-Language#h_01HD64XH64GBYHWJNH1BV857TA). You can't suppress the following information in the response: *info*, *breadcrumb*, *footer*.

For more information see also [Query Response Best Practice](/product-discovery/building-the-front-end-experience-with-fhr/best-practice/fredhopper-query-response-best-practices.md).
{% endhint %}
{% endstep %}

{% step %}

#### Optimize and maintain your integration

Beyond functional integration, focus on optimizing how your front end interacts with the Fredhopper Query API. Follow recommended strategies for minimizing latency, reducing payload size, caching, and limiting unnecessary queries. Regularly review your setup against Fredhopper’s evolving [best-practice documentation](/product-discovery/building-the-front-end-experience-with-fhr/best-practice.md).
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://crownpeak.gitbook.io/product-discovery/building-the-front-end-experience-with-fhr/step-by-step-to-your-front-end-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.