Embedding Pedigrees on Other Websites

Created: Feb 22, 2019    |    Updated: Jan 14, 2021   |   Tools and Features

Our pedigree software allows you to place a pedigree directly on your website by generating a 3, 4, or 5 generation pedigree table and allowing you to copy the HTML code and associated styles, and then paste that into your web page.

1.) Visit the pedigree report for the animal

The pedigree HTML that is generated will reflect the current state of the animal's pedigree. If any changes to the name, titles, date of birth or other information is incorect, you can use the Edit button in the option bar to make the corrections before you proceed.

2.) Locate the "Share" button in the report menu and click it.

3.) Click the "Embed Pedigree on a website" link

Share Menu Embed Pedigree

A modal pop-up will show, and load by default, a 3-generation pedigree with our default colors. You can use the two color selection boxes to customize the male and female boxes to your liking, such as to match your website color scheme. You can also choose a different generation length and then click Apply to re-render the pedigree.

Share Menu Embed Pedigree Settings

4.) Click the "Copy HTML Code" button at the bottom of the pop-up.

If you get a message that the code could not be copied (this is sometimes due to web browser security settings), you can manually copy the code by clicking on the "View Code" tab above the pedigree table. This will switch the view to a text box. Click inside the text box, then go to the Edit menu -> Select All, and finally Edit Menu -> Copy.

Share Menu Embed Pedigree Code

Now this code and formatting styles will be in your clipboard. You can now click the Edit Menu -> Paste this code into a file in your text editor, or into your WordPress website using the RAW HTML method, or by inserting an HTML Snippet if your theme's editor has a specific feature for that.

Futher Customizations can be done by editing the stylesheet settings at the bottom of the HTML code.

Advanced users may wish to modify or override the style information that we include with the HTML snippet. You are free to modify any of the settings between the


Was this article helpful?

 

Can't find the answer to your question?

Email Us Support Center