Adding the Thryv client portal widget to your WordPress website gives your clients a direct way to book appointments, make payments, and communicate with your business without leaving your website. Instead of directing clients to a separate page or link, the client portal widget embeds your Thryv client portal directly into your existing WordPress site, keeping the experience seamless for your clients and reducing the steps between a website visit and a booked appointment or completed payment.

How to Add the Thryv Client Portal Widget to Your WordPress Website

Follow these steps to copy the client portal HTML code from Thryv and add it to your WordPress website.

1. Copy the Client Portal HTML code from Thryv

Click Online Presence in the left-hand navigation of your Thryv account. The Online Presence page displays your client portal settings and website widget options. Click the Add To Website button to generate your client portal HTML code. Copy the HTML code displayed on the screen.

2. Open the WordPress Theme Editor

Log in to your WordPress admin panel. Click Appearance in the left-hand navigation of your WordPress admin panel. Then click Editor. The WordPress theme editor will open, displaying your theme files on the right-hand side of the screen.

3. Open the Footer file

In the right-hand panel of the WordPress theme editor, locate and click Footer. The Footer file will open in the editor, displaying the HTML code for your website's footer section.

4. Paste the Client Portal HTML code

Locate the closing </body> tag in the Footer file. Paste the client portal HTML code you copied from Thryv directly before the </body> tag. Placing the code before the closing </body> tag ensures the client portal widget loads correctly on every page of your WordPress website.

5. Update your website

Click Update to save your changes to the Footer file. The client portal widget will now appear on all pages of your WordPress website.

How to Add the Client Portal Widget to Specific Pages Only

If you want the client portal widget to appear on specific pages rather than every page of your WordPress website, paste the client portal HTML code directly into the HTML editor of each individual page where you want the widget to appear, rather than pasting it into the Footer file.

How to Access the HTML Editor in WordPress

WordPress has two editors: the Classic editor and the Gutenberg editor. The method for switching to the HTML editor is different in each.

Classic Editor

In the WordPress Classic editor, the visual editor and the HTML editor are displayed side by side at the top of the editing screen. Click the Text tab at the top-right of the editing area to switch from the visual editor to the HTML editor. Paste the client portal HTML code in the HTML editor at the location where you want the widget to appear on the page.

Gutenberg Editor

In the WordPress Gutenberg editor, you can switch to the HTML editor using one of the following two methods:

• Per block, click the three-dot menu (⋮) on the individual block where you want to add the HTML code. Select Edit as HTML from the dropdown menu to switch that block to HTML editing mode.
• Entire post, click the three-dot menu (⋮) in the top-right corner of the Gutenberg editor toolbar. Select Code Editor from the dropdown menu to switch the entire post or page to HTML editing mode.

Frequently Asked Questions

Where do I find the client portal HTML code in Thryv? 

The client portal HTML code is available in the Online Presence section of your Thryv account. Click Online Presence in the left-hand navigation, then click the Add To Website button to generate and copy the HTML code.

Where do I paste the client portal HTML code in WordPress? 

To display the client portal widget on every page of your WordPress website, paste the HTML code directly before the closing </body> tag in the Footer file of your WordPress theme editor. To display the widget on specific pages only, paste the HTML code into the HTML editor of each individual page where you want the widget to appear.

What is the difference between the WordPress Classic editor and the Gutenberg editor? 

The Classic editor displays the visual and HTML editors side by side and allows you to switch between them using the Visual and Text tabs. The Gutenberg editor uses a block-based layout and requires you to switch to HTML editing mode either per block using the block-level three-dot menu, or for the entire post using the three-dot menu in the editor toolbar.

Will the client portal widget appear on every page of my WordPress website? 

If you paste the client portal HTML code into the Footer file of your WordPress theme editor, the widget will appear on every page of your website. If you want the widget to appear on specific pages only, paste the HTML code into the HTML editor of each individual page instead of the Footer file.

What does this article cover? 

This article covers how to copy the Thryv client portal HTML code and add it to a WordPress website using the WordPress theme editor, the Classic editor, and the Gutenberg editor. It does not cover adding the widget to non-WordPress websites, configuring client portal widget settings in Thryv, or managing WordPress themes.