Installing Doofinder

Doofinder can be quickly and easily integrated with any web or eCommerce solution.

If you have a custom site that does not use a plugin for its eCommerce site, it is still possible to integrate the Doofinder search into your site. To install it, ensure that you have the following ready:

Pre-requisites to install Doofinder

Doofinder Account.

Product Data Feed.

Installation Steps

Video last updated before 2024-12-31

Doofinder can be installed in four easy steps. If you already have a Doofinder account, please log in, otherwise you can register for one.

Click on "Create Store" to begin the installation process.

Step 1: Create a Store

Enter the complete URL of your website, then select "Other" in the field of the platform you are using and click on "Continue".

Step 2: Create a Search Engine

In this step, you will define the configuration of your Search Engine. You can choose a name, a language, a currency and a business sector.

– Name: By default, Doofinder uses the URL entered during the previous step, but you can type a name of your choice. This name will be applied to the Store, the Search Engine and the Layer.

– Language: Select a language from the dropdown menu. Note that the language code selected must match the source HTML language code. If the HTML of your website is in lang="en", then you must select "en" only and not "en-UK".

– Currency: Choose a currency.

– Sector: Select the sector that applies to your Store.

Once done, click on "Continue".

Step 3: Index a feed

It is time to index your feed. You can choose to use a file or an API (for this example, we will use the available sample feed).

– File Feed: Enter your feed URL or drop the CSV, XML file.

– API: Visit our API documentation.

Now you need to enter the search input CSS selector to indicate where on the website you want to trigger the Layer when the customer clicks.

If you want to learn how to choose the CSS selector, read this article.

Then click "Create".

Step 4: Generate your script

You are almost done!

We have consolidated the management of all products into a single installation script, enabling quicker and easier implementation of new features, services, and updates in the future.

The Doofinder script is the javascript code Doofinder will provide once you’ve created an account while signing in as a new user. You can always find the Doofinder Script on your Admin Panel > Configuration > Store Settings > General. Scroll down to Installation Script and you’ll find it displayed.

Default Script

This is the single script with minimum configuration (store and zone):

   <script src="https://eu1-config.doofinder.com/2.x/b128a542-ec79-4823-92d1-025d6345ab7c.js" async></script>

This script contains:

• Zone “eu1-config.doofinder.com”

Zone must be configured depending on the EU zone or US zone (your online store zone). “eu1” if your zone is Europe or “us1” if your zone is the United States.

• Store ID: is your Store ID code followed by “.js”.

How To Update Your Script

Why Does The Doofinder Script Change

We have combined all products to be managed with a single installation script. By updating your script, you'll be ready to fully harness the new Recommendations and all the exciting enhancements we’re introducing in the near future.

The single script is a javascript code that clients add to their site to use any number of Doofinder apps. As you have been a Doofinder user since before this update and you have contracted one of the new products, you need to update the script so that the new products can connect to your store.

Updating The Script

Start by logging into your Admin Panel, and from the left-hand menu, select any product that you have not contracted yet. For example, click on Recommendations. You'll automatically be advised that you need to update the scripts from a warning on the top of the screen. Click on Replace Script and continue.

Once there, you'll find a set of steps to guide you through updating your script successfully. Simply follow the steps provided in the pop-up window.

To replace the script follow the steps provided in this section.

If you have any of these advanced features, it's likely your script is customized:

• Integrated Product Reviews
• Targeted product visibility
• Hover images for Product Cards
• Hidden Prices
• B2B Personalized Pricing
• GIFs on Product Cards
• Stock updates on Product Cards
• Availability flags on Product Cards
• Color options on Product Cards

Plugins - Update

To seamlessly update the Doofinder Single Script, all you need to do is ensure that your online store's plugin is updated to its latest version. This applies to the following Plugins:

• Shopify
• Magento
• WooCommerce
• Prestashop
• BigCommerce
• VTEX
• JTL

Ensure your plugin is up-to-date, and you'll be ready to enjoy the enhanced features and performance of the latest Doofinder Single Script.

Manual Installation - Update

If you have a custom site that does not use a plugin for its e-commerce site and you’re already using Doofinder, you’ll need to replace the old Doofinder Script with the New Doofinder Single Script on the HTML Code on your website.

Simply copy and paste the script into the section of your HTML. It requires to be placed in either the footer or header section to ensure it's applied to all pages consistently throughout your website.

As you enter your Admin Panel, a series of steps will be shown on your screen along with a step-by-step guide to successfully replace the new script. Please, read these instructions carefully and follow the steps recommended.

Integrate Doofinder Using GTM

Integrating Doofinder using the Google Tag Manager (GTM) allows you to manage your script without touching your site's HTML code.

To integrate it this way, follow these steps:

1. Create your GTM account or log in if you already have one.
2. Select the workspace where you're going to add the new script.

3. Select "Add a new tag" to configure Doofinder's script.

4. On the next screen, provide the following:

– A name for the new tag, for instance: "Live Layer Script".

– Inside the tag configuration, ensure that the tag type is Custom HTML and paste your script for Doofinder inside the HTML editor, including the surrounding script tags.

The term 'const' does not work in GTM, so it is necessary to modify the beginning of the Live Layer script as follows:
const dfLayerOptions => var dfLayerOptions
See the image below.



– Then under Triggering, choose when the script must be activated. Note that the recommended option is All Pages. This way, Doofinder will be available on all pages.


5. Once done, press "Save" and your HTML tag will be created.

6. Back in your GTM dashboard, press the "Submit" button in the top right corner.

7. Select "Publish and Create Version", then provide a relevant version name and description for the records, choose the environment where you want to publish the changes and press the "Publish" button in the top right corner.

8. You will be able to see the details of the latest published version from the dashboard. The Doofinder Layer should be working as soon as the information reflects the latest version.