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>

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.