Skip to Content
Linkyt is released 🎉
DocumentationEmbeddingPlarformsWordPress Integration

WordPress Integration

WordPress is one of the most popular platforms for Linkyt integrations. This guide covers multiple methods to embed both booking forms and storefronts in your WordPress site.

Compatibility: Works with WordPress 5.0+ and all major themes. No plugin required for basic integration.

The easiest way to add Linkyt widgets to any WordPress page or post.

For Booking Forms

  1. Edit the page where you want to add the booking form
  2. Add a new Custom HTML block
  3. Paste this code:
wordpress-booking.htmlhtml
<!-- Linkyt Booking Form -->
<div
data-linkyt-booking
data-shop-id="your-shop-id"
data-booking-id="your-booking-id"
data-theme-color="#6A64F1"
style="width: 100%; min-height: 600px;"
></div>

  <script src="https://booking.linkyt.com/embed.js" async></script>

For E-commerce Storefronts

wordpress-storefront.htmlhtml
<!-- Linkyt Storefront -->
<link rel="stylesheet" href="https://cdn.linkyt.io/style.css">

  <div
    data-linkyt-storefront
    data-store-id="your-store-id"
    data-accent-color="#3182ce"
    style="width: 100%; min-height: 700px;"
  ></div>

  <script src="https://cdn.linkyt.io/linkyt-storefront.umd.cjs"></script>

Method 2: Theme Integration

For site-wide integration or custom themes.

Add to Header (functions.php)

functions.phpphp
<?php
// Add Linkyt scripts and styles
function linkyt_enqueue_scripts() {
  // For booking forms
  wp_enqueue_script('linkyt-booking', 'https://booking.linkyt.com/embed.js', array(), null, true);

  // For storefronts
  wp_enqueue_style('linkyt-styles', 'https://cdn.linkyt.io/style.css');
  wp_enqueue_script('linkyt-storefront', 'https://cdn.linkyt.io/linkyt-storefront.umd.cjs', array(), null, true);
}
add_action('wp_enqueue_scripts', 'linkyt_enqueue_scripts');
?>

Add Container to Template

page-template.phpphp
<?php
// In your page template file
?>
<div class="linkyt-container">
  <div
      data-linkyt-storefront
      data-store-id="<?php echo esc_attr(get_option('linkyt_store_id', 'your-store-id')); ?>"
      data-accent-color="<?php echo esc_attr(get_theme_mod('accent_color', '#3182ce')); ?>"
      style="width: 100%; min-height: 700px;"
  ></div>
</div>

Method 3: Custom Shortcodes

Create reusable shortcodes for easy content management.

Booking Form Shortcode

booking-shortcode.phpphp
<?php
// Add to functions.php

  // Enqueue booking script
  function linkyt_booking_enqueue_scripts() {
      wp_enqueue_script('linkyt-booking', 'https://booking.linkyt.com/embed.js', array(), null, true);
  }
  add_action('wp_enqueue_scripts', 'linkyt_booking_enqueue_scripts');

  // Create booking shortcode
  function linkyt_booking_shortcode($atts) {
      $atts = shortcode_atts(array(
          'shop_id' => 'your-shop-id',
          'booking_id' => 'your-booking-id',
          'theme_color' => '#6A64F1',
          'width' => '100%',
          'height' => '600px',
      ), $atts);

      return '<div
          data-linkyt-booking
          data-shop-id="' . esc_attr($atts['shop_id']) . '"
          data-booking-id="' . esc_attr($atts['booking_id']) . '"
          data-theme-color="' . esc_attr($atts['theme_color']) . '"
          style="width: ' . esc_attr($atts['width']) . '; min-height: ' . esc_attr($atts['height']) . ';"
      ></div>';
  }
  add_shortcode('linkyt_booking', 'linkyt_booking_shortcode');
  ?>

Storefront Shortcode

storefront-shortcode.phpphp
<?php
// Add to functions.php

  // Enqueue storefront scripts and styles
  function linkyt_storefront_enqueue_scripts() {
      wp_enqueue_style('linkyt-styles', 'https://cdn.linkyt.io/style.css');
      wp_enqueue_script('linkyt-storefront', 'https://cdn.linkyt.io/linkyt-storefront.umd.cjs', array(), null, true);
  }
  add_action('wp_enqueue_scripts', 'linkyt_storefront_enqueue_scripts');

  // Create storefront shortcode
  function linkyt_storefront_shortcode($atts) {
      $atts = shortcode_atts(array(
          'store_id' => 'your-store-id',
          'accent_color' => '#3182ce',
          'height' => '700px',
          'currency' => 'USD',
          'language' => 'en',
      ), $atts);

      return '<div
          data-linkyt-storefront
          data-store-id="' . esc_attr($atts['store_id']) . '"
          data-accent-color="' . esc_attr($atts['accent_color']) . '"
          data-currency="' . esc_attr($atts['currency']) . '"
          data-language="' . esc_attr($atts['language']) . '"
          style="width: 100%; min-height: ' . esc_attr($atts['height']) . ';"
      ></div>';
  }
  add_shortcode('linkyt_storefront', 'linkyt_storefront_shortcode');
  ?>

Using Shortcodes

Once added to your functions.php, use these shortcodes in any page or post:

shortcode-usage.txttext
[linkyt_booking shop_id="your-shop-id" booking_id="your-booking-id" theme_color="#4CAF50"]

  [linkyt_storefront store_id="your-store-id" accent_color="#e53e3e" height="800px"]

Method 4: Widget Areas

Add Linkyt widgets to sidebars and widget areas.

widget-class.phpphp
<?php
// Custom Linkyt Widget Class
class Linkyt_Widget extends WP_Widget {

  function __construct() {
      parent::__construct(
          'linkyt_widget',
          __('Linkyt Widget', 'textdomain'),
          array('description' => __('Add Linkyt booking forms or storefronts', 'textdomain'))
      );
  }

  public function widget($args, $instance) {
      $title = apply_filters('widget_title', $instance['title']);
      $type = $instance['type'];
      $store_id = $instance['store_id'];
      $accent_color = $instance['accent_color'];

      echo $args['before_widget'];

      if (!empty($title)) {
          echo $args['before_title'] . $title . $args['after_title'];
      }

      if ($type === 'storefront') {
          echo '<div
              data-linkyt-storefront
              data-store-id="' . esc_attr($store_id) . '"
              data-accent-color="' . esc_attr($accent_color) . '"
              style="width: 100%; min-height: 400px;"
          ></div>';
      } else {
          echo '<div
              data-linkyt-booking
              data-shop-id="' . esc_attr($store_id) . '"
              data-booking-id="' . esc_attr($instance['booking_id']) . '"
              data-theme-color="' . esc_attr($accent_color) . '"
              style="width: 100%; min-height: 400px;"
          ></div>';
      }

      echo $args['after_widget'];
  }

  public function form($instance) {
      $title = isset($instance['title']) ? $instance['title'] : '';
      $type = isset($instance['type']) ? $instance['type'] : 'storefront';
      $store_id = isset($instance['store_id']) ? $instance['store_id'] : '';
      $booking_id = isset($instance['booking_id']) ? $instance['booking_id'] : '';
      $accent_color = isset($instance['accent_color']) ? $instance['accent_color'] : '#3182ce';
      ?>
      <p>
          <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
      </p>
      <p>
          <label for="<?php echo $this->get_field_id('type'); ?>"><?php _e('Type:'); ?></label>
          <select class="widefat" id="<?php echo $this->get_field_id('type'); ?>" name="<?php echo $this->get_field_name('type'); ?>">
              <option value="storefront" <?php selected($type, 'storefront'); ?>>Storefront</option>
              <option value="booking" <?php selected($type, 'booking'); ?>>Booking Form</option>
          </select>
      </p>
      <p>
          <label for="<?php echo $this->get_field_id('store_id'); ?>"><?php _e('Store/Shop ID:'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('store_id'); ?>" name="<?php echo $this->get_field_name('store_id'); ?>" type="text" value="<?php echo esc_attr($store_id); ?>" />
      </p>
      <p>
          <label for="<?php echo $this->get_field_id('booking_id'); ?>"><?php _e('Booking ID (for booking forms):'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('booking_id'); ?>" name="<?php echo $this->get_field_name('booking_id'); ?>" type="text" value="<?php echo esc_attr($booking_id); ?>" />
      </p>
      <p>
          <label for="<?php echo $this->get_field_id('accent_color'); ?>"><?php _e('Accent Color:'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('accent_color'); ?>" name="<?php echo $this->get_field_name('accent_color'); ?>" type="color" value="<?php echo esc_attr($accent_color); ?>" />
      </p>
      <?php
  }

  public function update($new_instance, $old_instance) {
      $instance = array();
      $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
      $instance['type'] = (!empty($new_instance['type'])) ? strip_tags($new_instance['type']) : 'storefront';
      $instance['store_id'] = (!empty($new_instance['store_id'])) ? strip_tags($new_instance['store_id']) : '';
      $instance['booking_id'] = (!empty($new_instance['booking_id'])) ? strip_tags($new_instance['booking_id']) : '';
      $instance['accent_color'] = (!empty($new_instance['accent_color'])) ? strip_tags($new_instance['accent_color']) : '#3182ce';
      return $instance;
  }
}

// Register the widget
function register_linkyt_widget() {
register_widget('Linkyt_Widget');
}
add_action('widgets_init', 'register_linkyt_widget');
?>

Troubleshooting

Common Issues

Script Conflicts: If the widget doesn’t load, check for JavaScript errors in the browser console. Some themes or plugins may conflict with external scripts.

Solutions

  1. Script Loading Issues

    • Ensure scripts are loaded in the footer
    • Check for Content Security Policy restrictions
    • Verify theme compatibility

  2. Styling Conflicts

    • Add custom CSS to override theme styles
    • Use !important declarations if necessary
    • Check for CSS specificity issues

  3. Performance Optimization

    • Only load scripts on pages that need them
    • Use conditional loading based on page templates
conditional-loading.phpphp
<?php
  // Only load on specific pages
  function linkyt_conditional_scripts() {
      if (is_page('store') || is_page('booking')) {
          wp_enqueue_script('linkyt-storefront', 'https://cdn.linkyt.io/linkyt-storefront.umd.cjs', array(), null, true);
      }
  }
  add_action('wp_enqueue_scripts', 'linkyt_conditional_scripts');
  ?>

Best Practices

Performance Tips:
  • • Use shortcodes for easy content management
  • • Load scripts only where needed
  • • Test with your theme before going live
  • • Keep your WordPress and plugins updated

Next Steps

```

Last updated on
Booking FormsE-commerce Storefronts