---
title: Create a custom Visualforce search page (Deprecated)
slug: '1323'
canonical_url: https://docs.coveo.com/en/1323/
collection: coveo-for-salesforce
source_format: adoc
---
# Create a custom Visualforce search page (Deprecated)
> **Deprecated**
>
> This feature is still available, but no longer supported as of the August 2023 release of Coveo for Salesforce version [5.2](https://docs.coveo.com/en/n5bj0150#august-2023-release-v5-2-initial-release).

When integrating a Visualforce search page in Coveo for Salesforce, you usually want to create a custom Visualforce page that references the Coveo components.

There are many Coveo components you can add to your custom Visualforce page (see [Visualforce components](https://docs.coveo.com/en/1198/)).

This tutorial shows you how to create a custom Visualforce page and include a `SearchInterface` into it.

To create a custom Visualforce search page

. In Salesforce, under **Setup**, search for and select **Visualforce Pages** (**Build** > **Develop** > **Visualforce Pages**).
. On the **Visualforce Pages** page, select **New**.
. Give your new component a **Label**;
the **Name** should be filled automatically.

For this tutorial, you can enter `MyCustomSearchComponent`.

. On the **Visualforce Markup** tab, enter the following template:

```xml
 <apex:page standardstylesheets="false" sidebar="false" docType="html-5.0">
   <CoveoV2:SearchInterface mobile="false" name="myCustomPage"/>
 </apex:page>
```

This template will use a Visualforce component called `myCustomPage`, which you will be prompted to create when accessing your Visualforce page if it doesn't already exist.

. Select **Save** to save your Visualforce page.

You should now have a fully functional Visualforce page that you can use in Salesforce.

With your custom Visualforce page, you can add custom CSS using the `<style>` element, JavaScript using the `<script>` element, or leverage information in Apex using the `<apex>` element.

**Example**

To leverage information from the controller in the search page, you can use JavaScript to create a variable with all the values that you need so that you can use this variable in your code.
Keep in mind that this variable isn't available in the Interface Editor, but is available in your actual page.

```xml
<apex:page ...>
[...]
<apex:variable var="OrgID" value="{!IF(LEN($Organization.Id)==18, LEFT($Organization.Id, 15), $Organization.Id)}" />
    <script>
        (function(){
            Coveo.SFContext = {
                Current_Page: '{!$CurrentPage.Name}',
                Session_ID : '{!$Api.Session_ID}',
                Partner_Server_URL_200: '{!$Api.Partner_Server_URL_200}',
                Org_ID: '{!OrgID}',
                HiddenExpression: '@sforganizationid=={!OrgID} OR @uri (NOT @sforganizationid<>{!OrgID})'
            }
        })();
    </script>
</apex:page>
```

Now that you've created your custom search page, consider making it the default search page (see [Change the default Coveo-powered search page](https://docs.coveo.com/en/1307/)).