Skip to main content
Home Site Status Account Contact
Home Site Status Account Contact

Adding BookMe to an External Site

In addition to having BookMe available on your Zenfolio website, you can also embed the BookMe widget to an external website. This is done through creating an HTML code through your Zenfolio account and embedding this code into your external website.   While all website hosts have different interfaces and capabilities, the process follows two main steps:

Copy your BookMe HTML Snippet from Zenfolio.
Paste your BookMe HTML Snippet on your external website.



 

Copy your BookMe HTML Snippet

  1. In your Zenfolio account click on the BookMe BookMe.jpg icon. If you have not already added BookMe to your account, see this guide here.
  2. In the BookMe area of your account, go to the Launch tab.
  3. Choose the Third Party Sites option.


Embed 1.jpg
 

  1. In the Design tab you can choose the look and location of your BookMe widget on the external site.
  2. Choose the Accent/Button Color.
  3. Customize the Button Text to choose what the Bookme button says. 
  4. Change the location of the button with the Button Placement option. 
As you make changes, you can preview how the BookMe widget will look when embedded to your external website. 


Embed 2.jpg
 

  1. After setting the design of your BookMe widget, click on the Export tab.
  2. You will need to provide the actual Primary URL of the page you intend to embed the widget on.
  3. Copy the provided BookMe widget embed code.


Embed 3.jpg



 

Paste your BookMe HTML Snippet on your external website

As mentioned previously, all website hosts offer different interfaces and capabilities. Instructions for one website host may not be accurate information for another website host. For assistance with embedding HTML code to your external website, it is recommended that you contact the host of your external website. 

Here are a few of the common external website hosts used by Zenfolio website owners:

Squarespace
Wix
WordPress
Pixieset
Showit



 

Squarespace

https://support.squarespace.com/hc/en-us/articles/206543167

Add a Code Block
Edit a page or post, click an insert point, and select Code from the menu. For help, visit Adding content with blocks
Add your code in the text field.
If you're using the Code Block to display code snippets, check Display Source.
Click Apply to save your changes.
 
Add code
If you're using the Code Block to render code, ensure you select HTML or Markdown in the drop-down menu.

Enter or paste the code into the text field and remove the <p>Hello, World!</p> placeholder. To paste code, copy the code, then click into the field and press Ctrl + V (Windows) or Command + V (Mac).

Code Blocks set to CSS or JavaScript display code as text by default. To render CSS or JavaScript in Code Blocks, select HTML from the drop-down menu. Then, for CSS, surround the code with <style> </style> tags. For JavaScript, surround the code with <script> </script> tags.

Preview embedded code
As a security measure, sometimes your code won't appear when you're logged in, even if visitors can see it. If you can't see code you added to a Code Block, click Preview in Safe Mode to view the embedded item.



 

Wix

https://support.wix.com/en/article/embedding-custom-code-to-your-site

  1. Go to Settings in your site's dashboard.
  2. Click the Tracking & Analytics tab under Advanced Settings.
  3. Click + New Tool and select Custom from the dropdown. 
  4. Set up your custom code:
    1. Enter your custom code.
    2. Select the relevant domain. Note: This option will appear only if you have multiple domains.
    3. Enter a name for your custom code. 
    4. Add Code to Pages: Select which pages to add your code to:
      1. -All Pages: Click the dropdown to select an option:
      • -Load code once.
      • -Load code on each new page. Click here to learn more about this option. 
      1. -Choose specific pages: Begin typing the name of the relevant pages and then click the checkbox next to the relevant page. 
    5. Place Code in: Select where the code snippet in placed in your site's code:
      1. -Head
      2. -Body - start.
      3. -Body - end.    Note: If you're not sure where to embed your code please refer to the third-party's guidelines. 
  5. Click Apply. 

 

Wordpress

Creating Code Snippets

  1. Go to “Plugins > Add New” menu and search for “Insert HTML Snippet” plugin. Install and activate the plugin on your site. The plugin will add a new menu called “XYZ HTML” on the admin side bar.
  2. Navigate to “XYZ HTML > HTML Snippets” and click on the “Add New HTML Snippet” button.
  3. Provide a name for your widget in “Tracking name” box and insert your code inside the “HTML code” text box.
  4. Click on the “Create” button to save the snippet and create a shortcode. The shortcode will look like [ xyz-ihs snippet=”Your-snippet-name” ].
  5. Once the shortcode is created, you can pause the code from running and modify at time later. All created snippets can be seen under “XYZ HTML > HTML Snippets” menu.
  6. You can customize the default sorting criteria and the number of widgets to be shown on the dashboard page under “XYZ HTML > Settings” menu.


Inserting on Pages and Posts

  1. Now go to the WordPress page editor or post editor and you will see a button named “HTML” on the TinyMCE editor. Click on the button and choose the snippet shortcode you want to insert on your page or post.
  2. Preview and publish your pages or posts to see the live result of your code snippet.


Inserting Snippets on Widget Area

  1. Insert HTML Snippet plugin also offers a widget which can be inserted on the sidebar and footer widget area. Navigate to “Appearance > Widget” menu and drag and drop the “Insert HTML Snippet” widget to the sidebar or footer. Choose the shortcode of the required snippet and save your changes.



 

Pixieset

https://help.pixieset.com/hc/en-us/articles/360034392351-Adding-Custom-Header-Footer-Code

  1. Click on the “Settings” icon at the top of the left editor panel for Settings > Advanced, or click here .
  2. You should see two fields for Custom Header Code or Custom Footer Code. Simply copy & paste the code snippets to the appropriate field.
  3. Custom header/footer code will not render in the editor view. You can click on “Preview” to see the changes or publish your site to see the changes live.



 

ShowIt

https://learn.showit.co/en/articles/1152605-can-i-add-custom-html-code-into-my-site-s-head-section

  1. Inside the Showit builder, select the page name in the top left corner. If a canvas is selected it will only show canvas settings and not the page settings. To avoid this, click on the page name.
  2. In the right toolbar, you should see an a tab for "Advanced Settings". Select it and it will reveal a box for adding Custom Head HTML.
  3. Clicking the box will pull up a pop-up window that will allow you to paste your code. Click "Save" when finished.











 

Related articles