1. Embed the widget on your website

Two solutions here:

  • Integrate on a specific page (in a container)
  • Add a chat pop-up on every page of your website

Click on the tab with the relevant integration style for you, use our demo script to test the integration and simply change the name of the *client* to make it work with your inventory.

Or check directly if we have a detailed integration or plugin for your CMS here.

TEST YOUR FAVORITE INTEGRATION AND GET YOUR CODE

  1. Go to our demo staging page to test your integration
  2. You can simulate a pop-up or an on-page integration, as well as the different parameters
  3. For your pop-up button, simulate the right height & width you’d like to use as parameters in your script.
  4. Get your single line code and follow the instruction below or use one of our plugins. 

Integrations &  plugins or examples for different CMS

You’ll find below the integration steps or plugin for your CMS.

Pop-up Integration with code editor or FTP access: place this script in the footer.php file of WordPress (via FTP or Back-end Editor)

<script lang=”en” client=”wine.com” popup=”1″  src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

Pop-up integration with a Theme Builder (drag and drop Back-End interface, like Elementor, Salient or Divi  for instance): Simply add in your footer a “Javascript” Block with the following script:

<script lang=”en” client=”wine.com” popup=”1″ src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

Optional: You can select if you want the popup button to be on the left or right bottom corner, by adding it as a parameter in the js script.

<script lang=”en” client=”wine.com” popup=”1″ popup-position=”left” src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

 

By default (or without any mention in the script), the bot button will always be displayed on the bottom right corner.

A question?

We have developed a plugin to add or modify directly the script with a simple Back-End interface.

  1. Download here our Shopware plugin
  2. Install the Sommelier Bot Shopware plugin in your plugin manager
  3. Open the Sommelier Bot plugin in your plugin manager
  4. Add the below script in the field “additional code” (replace the “wine.com” demo client with your actual client name, given by your account manager)
  5. In the drop down “Plugin active inthis shop”: Select “Yes”
  6. Click “Save”
  7. Clear the Cache of your website in Configuration > Cache/performance

<script lang=”en” client=”wine.com” popup=”1″  src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

Optional: You can select if you want the popup button to be on the left or right bottom corner, by adding it as a parameter in the js script.

<script lang=”en” client=”wine.com” popup=”1″ popup-position=”left” src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

 

By default (or without any mention in the script), the bot button will always be displayed on the bottom right corner.

A question?

On the page you’d like to have the Sommelier Bot on:

  1. In the Field “Javascript Code” add the following script:

$.getScript( “https://widget-v2.sommelier.bot/widget-admin.js?lang=en&client=YOURCLIENTNAME” );

 

2. In the Field “HTML Code”, add the following container:
<div id=”sommelier-bot” style=”overflow-y: scroll;”></div>

A question?

To add the Sommelier Bot Pop-up in your website footer:

  1. Go to your My-Shopify Back-End
  2. Go to Online Store > Themes, then in the “Actions” dropdown, select “Edit Code”
  3. In the theme.liquid file, add the following script before the </html> tag, almost at the bottom of the file.

<script lang=”en” client=”wine.com” popup=”1″  src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

Optional: You can select if you want the popup button to be on the left or right bottom corner, by adding it as a parameter in the js script.

<script lang=”en” client=”wine.com” popup=”1″ popup-position=”left” src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

 

By default (or without any mention in the script), the bot button will always be displayed on the bottom right corner.

A question?

Since you cannot add any script in the WYSIWYG editor of Prestashop, you’ll have to have access to your FTP.

  1. Go to your footer.tpl file in your Theme folder
  2. Add the following script

<script lang=”en” client=”wine.com” popup=”1″  src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

Optional: You can select if you want the popup button to be on the left or right bottom corner, by adding it as a parameter in the js script.

<script lang=”en” client=”wine.com” popup=”1″ popup-position=”left” src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

 

By default (or without any mention in the script), the bot button will always be displayed on the bottom right corner.

A question?
popup sommelier bot

Pop-up Integration: place this script before the </body> tag of all pages, or in the footer.

<script lang=”en” client=”wine.com” popup=”1″  src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

Optional: You can select if you want the popup button to be on the left or right bottom corner, by adding it as a parameter in the js script.

<script lang=”en” client=”wine.com” popup=”1″ popup-position=”left” src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

 

By default (or without any mention in the script), the bot button will always be displayed on the bottom right corner.

A question?

Simulate your favorite integration

Use our Staging demo interface to simulate the style and position our your integration (pop-up or embedded), then get your code script code, to copy-paste on your website.

If you’d like to simulate your own design and inventory, ask your account manager to create your demo environment.

 

You can test both integrations:

  • Check the “pop-up” box to simulate a pop-up integration, select the position (left or right) and use the x and y parameters to move the pop-up button from the the corner (x = width, y=height).
  • Uncheck the “pop-up” box to simulate the embed of the Sommelier Bot on a single page.
Simulation page

If you want to have the sommelier.bot in a given container (which should have a unique ID) on your page or article, follow these steps

1. Place the div container at the desired place in your document where the sommelier.bot should appear

<div id=”sommelier-bot”></div>

Hint for WordPress users: Remember that you have to add the code just like the JavaScript, as html or via “text” mode, as mentioned above.

2. Place the following script at the end of the document, immediately before </body>

<script lang=”en” client=”wine.com” src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

Optional: You can set a lang key in the config with values “de” or “en”. If there is no lang key in the config, the sommelier.bot automatically tries to recognize the locale of the user by looking at the preferred browser settings. It will always default to en.

sommelier bot app

If you want to have the sommelier.bot as a pop-up button at the bottom (left or right) of the user screen, on all pages of your website, follow these steps

1. Place the script in your website footer.

<script lang=”en” client=”wine.com” popup=”1″  src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

Display pop-up on the left, by adding it as a parameter in the js script.

<script lang=”en” client=”wine.com” popup=”1″ popup-position=”left” src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

By default (or without any mention in the script), the bot button will always be displayed on the bottom right corner.

Change the pop-up button height or width from the corner, by adding it as a parameter in the js script.

<script lang=”en” client=”wine.com” popup=”1″ popup-x=”30″ popup-y=”50″ src=”https://widget-v2.sommelier.bot/widget-admin.js”></script>

Simply replace the number “30” and “50” respectively by the width and height you’d like to have the pop-up button from the corner of the screen.

You can test the result by using our demo staging website here, and replacing the parameters in the URL, to simulate the width and height you’d like in px.

popup sommelier bot

2. Create your XML Product Feed

Your XML Product feed is a URL, containing all your ACTIVE products details in a specific XML format, and hosted on your website, that you can fill in your user account in your Sommelier Bot Admin interface. This URL is called by the Sommelier Bot every night at 3am to load your latest product inventory:

  • if a new product is in your XML Product Feed: it will be added to your Sommelier Bot inventory. It can be then tagged and activated manually in the Admin interface.
  • if a product is not anymore in your XML Product Feed, it is considered out of stock and will be deactivated by our system. It remains in your Sommelier Bot Admin interface, but is not active.
  • if some product details have been updated in your website database, the XML Product Feed will automatically update theses details in your Sommelier Bot Admin interface. Only some details can be updated: name, price, description, link, image_url.

XML Product Feed required format

Same as Google Shopping product feed, use your webshop XML product feed function to provide the Sommelier Bot CMS with a simple URL, constantly up-to-date with the following required structured XML Fields from Google Shopping Feed (* fields are mandatory):

<channel>

<item>

<g:id> * = your unique product id (number and/or letters, special characters allowed, no space)

<title> * = your product name (ex: “2017 Domaine de la Romanee-Conti La Tache Grand Cru”)

<description> = your product description (text paragraph)

<link> * = the complete product URL link on your website (URL). CDATA is possible. It could also include a tracking UTM.

<g:brand>* = the name of the producer (short text)

<g:image_link>* = the complete product picture URL link on your website (URL)

<g:price>* = the price of the product in your currency (format: XXXX.XX with no comma or space, no need for the currency sign)

<g:country>* = the country of production (ISO format, ex: CH, UK, US…)

<varietals>* = the varietal(s) of the wine, comma separated (Pinot Noir,Chardonnay), no space.

<region>* = the region of production

<alcohol_level> = the alcohol level in % (ex: 13.50)

<custom> = custom variable(s) of your choice (optional, with comma, no space)

<color> = the color of the wine (ex: white / red / sparkling…)

<g:unit_pricing_measure>* = the bottle format in Liters (NOT cl) (ex: 0.75 / 1.50 / 3.00, with no comma or space)

</item>

<item>

</item>

</channel>

XML Product Feed example

Here is an example of XML Product Feed URL: https://www.obrist.ch/de/amfeed/feed/download?id=21

 

XML Product Feed example, containing 2 products:

<?xml version=”1.0″?>
<rss version=”2.0″ xmlns:g=”http://base.google.com/ns/1.0″ lang=”de” xml:lang=”de”>
<channel><item><g:id>45425007NM-75LCT06</g:id>
<title>Monte Corbino Brut</title>
<g:brand>Vallis Mareni</g:brand>
<link><![CDATA[https://www.obrist.ch/de/monte-corbino-brut?utm_source=sommelier-bot&utm_medium=chat]]></link>
<g:image_link>https://www.obrist.ch/media/catalog/product/4/5/45425007nm.png</g:image_link>
<g:custom_label_4>sparkling</g:custom_label_4>
<g:custom_label_0>Prosecco (Glera)</g:custom_label_0>
<g:custom_label_2>12.00</g:custom_label_2>
<g:country>Italie</g:country>
<g:custom_label_1>Vénétie</g:custom_label_1>
<g:price>12.40 CHF</g:price>
<g:unit_pricing_measure>0.75</g:unit_pricing_measure>
</item>

<item><g:id>4425B00109-75LCB06</g:id>
<title>Château Mouton Rothschild 2009</title>
<g:brand>Château Mouton Rothschild</g:brand>
<link><![CDATA[https://www.obrist.ch/de/château-mouton-rothschild-2009?utm_source=sommelier-bot&utm_medium=chat]]></link>
<g:image_link>https://www.obrist.ch/media/catalog/product/4/4/4425b00109.png</g:image_link>
<g:custom_label_4>red</g:custom_label_4>
<g:custom_label_0>Cabernet Sauvignon|Merlot</g:custom_label_0>
<g:custom_label_2>12.5</g:custom_label_2>
<g:country>France</g:country>
<g:custom_label_1>Pauillac</g:custom_label_1>
<g:price>950.00 CHF</g:price>
<g:unit_pricing_measure>0.75</g:unit_pricing_measure>
</item>

</channel>
</rss>

Finally add your XML Product Feed URL, one for each language you’d like to use the bot in, directly in your Sommelier Bot Admin interface, as shown below.