Skip to main content

Bokningsassistent instruktioner

För att implementera bokningsassistenten på er hemsida följ dessa instruktioner.

  1. Meddela oss vilken url där bokningsassistenten ska ligga, till exempel foretagX.se/boka
  2. Meddela oss om ni vill att det ska finnas startvärden, till exempel om Hemstädning ska vara förvald.
  3. Meddela oss vilka huvudfärger som ni använder, helst färgkoder.
  4. Nedan är information för att lägga koden för bokningsassistenten på er hemsida. Behöver ni hjälp med detta, kontakta oss.

Common implementation instruction

1. Put plugin css link in <head> section of your site

<link href="https://plugin.bokahem.se/css/app.css" rel="stylesheet" />

2. Put plugin js link at the end of </body> section of your site 

<script src="https://plugin.bokahem.se/js/app.js"></script>

3. Put bokahem plugin tag somewhere in the page of your site where plugin should be rendered 

<bokahem-plugin></bokahem-plugin>

Plugin Attribute Configuration Guide

You can control the default behavior of the plugin by passing attributes. These default values can be set in two ways:

  • As HTML attributes in the <bokahem-plugin> tag

  • As query parameters in the page URL

Available Attributes

  • service – Numeric ID of the service category. You can find this ID in your dashboard under Services, in the Number column.
  • postnr – A valid postal code (e.g., 753 37 or 75337).
  • kvm – Numerica value representing the number of square meters (e.g., 85, 100)
  • campaign – Promo campaign code. If the code is valid and the campaign is active, it will automatically apply the discount to the user’s session. Useful for linking from marketing campaigns.
Setting attributes is optional. You can choose to provide any combination—or none at all.

1. Set Attributes via Plugin Tag

You can define attributes directly in the HTML of your plugin:

<bokahem-plugin service="2" postnr="753 37" kvm="100" campaign="promo25"> </bokahem-plugin>

2. Set Attributes via URL Query Parameters

You can also pass attributes as query parameters in the page URL:

https://bokahem.se/bokningassistent_demo/?service=2&postnr=75437&kvm=100&campaign=promo25

This method is especially useful for marketing links or embedding the plugin on dynamic pages.

Notes

  • You can use any one attribute, or multiple—there’s no requirement to include all of them.

  • The campaign code will only apply if it’s valid and the corresponding campaign is active.

Raw implementation instruction

<html>
<head>
<link href="https://plugin.bokahem.se/css/app.css" rel=stylesheet" />
</head>
<body>
<bokahem-plugin></bokahem-plugin>
<script src="https://plugin.bokahem.se/js/app.js"></script>
</body>
</html>

WordPress implementation instruction

First approach – Use WP plugin to edit header and footer

For example, WP Plugin – Head & Footer Code.

1. Install Head & Footer Code Plugin in WP

  • Plugins – Add new

2. Activate a plugin

  • Plugins – Head & Footer Code – Activate

3. Go to plugin page

  • Tools – Head & Footer Code

4. Put css link in “HEAD Code” section

<link href="https://plugin.bokahem.se/css/app.css" rel="stylesheet" />

5. Put js script in “FOOTER Code” section

<script src="https://plugin.bokahem.se/js/app.js"></script>

6. Create a WP page and put <bokahem-plugin></bokahem-plugin> as html-block there. If using text editor, then use it in text mode, not visual mode, because it’s important that <bokahem-plugin></bokahem-plugin> will be recognized as tag not as just a text.

Second approach – Direct edit of header.php and footer.php in Theme files

BE CAREFUL TO USE THIS APPROACH IF YOU HAVE ENABLED AUTOMATIC THEME UPDATES IN YOUR WORDPRESS. It could update header.php and footer.php and remove Smartapresentkort plugin scripts and style links from there.

  1. Appearence – Theme Editor – > header.php -> put above css link in <head> section
  2. Appearence – Theme Editor -> footer.php -> put above js link in </body> section
  3. Create a WP page and put <bokahem-plugin></bokahem-plugin> as a html-block there.
    If using text editor then use it in text mode, not visual mode, it’s important that <bokahem-plugin></bokahem-plugin> will be recognized as tags not as just text.