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 e-commerce 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
📌 Important: If you are using a CMS, please visit our Plugins section to install Doofinder in your site.
Installation
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: 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: 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: 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: Script
You are almost done!
Just copy and paste the script into your website. It has to be in the footer or header so that it applies to all pages of your site.
Click ‘Close’ and go to Search Engines > Settings > Indices to check if the process ended up right.
Google Tag Manager Integration
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.
📌 Note: 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, you may 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.Next, 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.
📌 Note: If you have integrated Doofinder through GTM and you cannot see it correctly, it may be due to Adblockers. If Adblockers affect GTM, the Adblockers may block your GTM scripts and Doofinder may not display. In this case, you will have to install Doofinder in the standard way.