Wayke Valuation Web

This is an embeddable widget used to valuate a car based on Wayke Intelligent Pricing.

Getting started

Contact Wayke in order to get your origin white listed in order to interact with the API. Same applies for local development, for example, if http://my-custom-origin:5000 is white listed, update your local host file so that http://my-custom-origin points to 127.0.0.1. Now you can access http://my-custom-origin:5000 in the browser and interact with the API.

Using npm

npm install @wayke-se/wayke-valuation-web

import WaykeValuationWeb from '@wayke-se/wayke-valuation-web';
import '@wayke-se/wayke-valuation-web/dist/index.css';

new WaykeValuationWeb({
  url: 'https://api.wayke.se',
  branches: [
    {
      id: '51577a27-7c62-42da-8fda-0b158c160868',
      name: 'Branch A',
    },
  ],
  conditionReduction: {
    veryGood: 0.9,
    good: 0.8,
    ok: 0.7,
  },
});

Using cdn

The associated css is injected into head by default once a new WaykeValuationWeb(...) is called. This can be turned off by adding disablecssinjection to the script tag.

<script
  src="https://cdn.wayke.se/public-assets/wayke-valuation-web/x.x.x/index.js"
></script>
<script>
  window.addEventListener('DOMContentLoaded', (_) => {
    new WaykeValuationWeb({
      url: 'https://api.wayke.se',
      branches: [
        {
          id: '51577a27-7c62-42da-8fda-0b158c160868',
          name: 'Branch A',
        },
      ],
      conditionReduction: {
        veryGood: 0.9,
        good: 0.8,
        ok: 0.7,
      },
    });
  });
</script>

Examples For examples in detail, head over to https://github.com/wayke-se/wayke-valuation-web-example

Full configuration

new WaykeValuationWeb({
  rootId: 'custom-id',
  url: 'https://api.wayke.se',
  branches: [
    {
      id: '51577a27-7c62-42da-8fda-0b158c160868',
      name: 'Branch A',
    },
    {
      id: '51577a27-7c62-42da-8fda-0b158c160862',
      name: 'Branch B',
    },
  ],
  conditionReduction: {
    veryGood: 0.9,
    good: 0.8,
    ok: 0.7,
  },
  defaultExpanded: true,
  logo: 'https://via.placeholder.com/140x40',
  logo2x: 'https://via.placeholder.com/280x80',
  theme: {
    floatingBackground: '#000',
    floatingForeground: '#fff',
    primaryBackground: '#4c4c4c',
    primaryForeground: '#ffffff',
    secondaryBackground: '#f3f3f3',
    secondaryForeground: '#4c4c4c',
    buttonBorderRadius: '8px',
    linkColor: '#0000ff',
  },
});

Instance

Instance contains one public method, .close().

Required

• branches Must contain atleast one branch, if more then one is provided, a select will be displayed where the user must select one.
• url Should be one of the following urls below:

| Environment | Url | | ----------- | --------------------------------- | | Test | https://test-ext-api.wayketech.se | | Production | https://api.wayke.se |

• conditionReduction.veryGood Price reduction when condition is very good
• conditionReduction.good Price reduction when condition is good
• conditionReduction.ok Price reduction when condition is ok

Optional

• rootId Provide custom element that WaykeValuationWeb should append to. Defaults to undefined
• manual Manually controll when the widget should be displayed (This will remove the floating panel). Defaults to false
• defaultExpanded Should the floating panel be expanded by default or not. Defaults to false
• logo Url to a logotype. The real size will be displayed. Wayke logotype will be displayed if not set
• logo2x Url to a logotype with 2x density. If logo is 100x50px, this image should be sized 200x100px
• theme.floatingBackground Override default background color on the floating panel. Defaults to #ea566c
• theme.floatingForeground Override default foreground color on the floating panel, such as the text. Defaults to #424240
• theme.primaryBackground Override default background color on primary elements, such as buttons. Defaults to #ea566c
• theme.primaryForeground Override default foreground color on primary elements. Defaults to #ffffff
• theme.secondaryBackground Override default background color on secondary elements, such as buttons. Defaults to #fceef0
• theme.secondaryForeground Override default foreground color on secondary elements. Defaults to #ea566c
• theme.buttonBorderRadius Override default buttonBorderRadius. Defaults to 50% (calculated from button size)
• theme.linkColor Override color of links. Defaults to #00b6d3

CSS specificity

⚠️ We can guarantee to not overwrite any of the host site CSS. But it is possible for the host site to overwrite the styling in Wayke Valuation. Read how to prevent such overwrites below.

All CSS class names are prefixed using the namespace .waykevaluation-*. This will prevent this widget to overwrite any CSS applied to the website on which it is implemented on. However, we can not guarantee other CSS files won't overwrite the CSS in Wayke Valuation. This is due to it is impossible to protect against element selectors.

Reset styles and other necessary CSS targeting elements are selected using a nested selector based of the root element (.waykevaluation-root) placed inside a :where() to prevent higher specificity than class name selectors.

Avoid using element selectors (div, a, span etc.) in you website's CSS. It is a good practice to only using classes as selectors. If you experience strange styling in the Wayke Valuation widget, this is probably the case.

Custom CSS

If you want to custommize any CSS we recommend you to include a separate CSS file with your styling using our selectors namespaced for higher specificity. I.e., .you-company-name .waykevaluation-[COMPONENT_NAME] { };.

The easiest way to add a namespace is to wrap the mounting element (#wayke-valuation) with a div having this namespace set following the example below.

<div class="your-company-name">
  <div id="wayke-valuation"></div>
</div>

Important: We can not guarantee our class names will stay the same or behave the same as they do at a specific time. Please understand that you may have to change the CSS continuously if you decide to add custom styling.

Headings

To prevent multiple h1 on your website, Wayke Valuation does not include a h1 as root heading level. Instead the headings starts from h2.