Jewellery Engraving Preview Tool
Installing the Engraving Preview Tool
To install the Jewellery Preview tool on your own website, simply copy and paste the code below into the desired location on your webpage.
The code is highly configurable, allowing you to easily centre the engraving on your item. The script is securely hosted on our own website and delivered via a Cloudflare CDN for both speed and reliability.
You will need to store the image you wish to use on your own server. The image should be square and at least 400px by 400px. For optimal performance, we recommend using an optimised image to ensure that the engraving preview tool runs smoothly.
The preview tool can use fonts already installed on the user’s computer by selecting "Custom" in the font selection menu.
• The first highlighted line sets the text that will appear within the tags. This can be your tool’s name, product name, or any other title.
• The next highlighted line defines the URL of the image you wish to use. This must be hosted on your own server. You can use different images for different pages or products.
• The character limit (e.g., 5) can be changed to suit your needs. Spaces are not counted as characters.
• The coordinates (e.g., 213 and 286) determine the initial position of the engraving text on your product image. Adjust these values to ensure the text appears exactly where you want it.
• The rotation value (e.g., -1) allows for slight alignment tweaks. If your image is already level, use 0.
• The initial font size (e.g., 70) provides a convenient starting point that you can easily adjust.
• The watermark text can be updated to display any message you would like to appear on downloaded images.
Please note that the script URL (highlighted in red) must not be changed, as this would prevent the tool from working.
Once downloaded, you will have a an image with a file name containing useful information about the settings used. For example, your downloaded image filename may look like this.
This image name includes the font size, rotation, and initial text position used for the engraving. By updating these details in the original code you embedded, the preview will open at the correct position and size every time. Minor adjustments may still be required depending on the font and character shapes.
We primarily use Windows and have not assessed custom font functionality on Apple computers. However, this feature was developed to help clients experiment with various fonts without needing manual mock-ups. Users can customise their text, download the preview image, and send it to you. The parameters included in the file name then enable you to replicate the design accurately.
<div id="signetPreviewContainer"> <script> window.signetPreviewConfig = { widgetTitle: 'My Custom Title', imageUrl: 'https://www.titanjewellery.co.uk/Ti56-Titanium-Signet-Ring-H30-600.jpg', characterLimit: 5, initialEngravingPosition: { x: 213, y: 286 }, initialRotation: -1, initialFontSize: 70, watermarkText: '© TitanJewellery.co.uk' }; </script> <script src="https://www.jewellery-workshop.co.uk/signet-preview.js"></script> </div>The code is highly configurable, allowing you to easily centre the engraving on your item. The script is securely hosted on our own website and delivered via a Cloudflare CDN for both speed and reliability.
You will need to store the image you wish to use on your own server. The image should be square and at least 400px by 400px. For optimal performance, we recommend using an optimised image to ensure that the engraving preview tool runs smoothly.
The preview tool can use fonts already installed on the user’s computer by selecting "Custom" in the font selection menu.
Customising the Engraving Settings
Certain parts of the script can be tailored to your specific webpage, as highlighted in yellow:• The first highlighted line sets the text that will appear within the tags. This can be your tool’s name, product name, or any other title.
• The next highlighted line defines the URL of the image you wish to use. This must be hosted on your own server. You can use different images for different pages or products.
• The character limit (e.g., 5) can be changed to suit your needs. Spaces are not counted as characters.
• The coordinates (e.g., 213 and 286) determine the initial position of the engraving text on your product image. Adjust these values to ensure the text appears exactly where you want it.
• The rotation value (e.g., -1) allows for slight alignment tweaks. If your image is already level, use 0.
• The initial font size (e.g., 70) provides a convenient starting point that you can easily adjust.
• The watermark text can be updated to display any message you would like to appear on downloaded images.
Please note that the script URL (highlighted in red) must not be changed, as this would prevent the tool from working.
Setting Up and Centring Your Text
Experiment with your image and text using the on-screen controls until the engraving is precisely positioned. Adjust the font size and rotation until it suits your item visually. Once you are satisfied, click the download button to save the preview image.Once downloaded, you will have a an image with a file name containing useful information about the settings used. For example, your downloaded image filename may look like this.
This image name includes the font size, rotation, and initial text position used for the engraving. By updating these details in the original code you embedded, the preview will open at the correct position and size every time. Minor adjustments may still be required depending on the font and character shapes.
Custom Engraved Fonts
The "Custom" font option allows users to preview any fonts already installed on their computer. If you or your clients wish to use a particular font, simply download, and install it. The font name must be typed exactly as it appears on the system (for example, "Script MT").We primarily use Windows and have not assessed custom font functionality on Apple computers. However, this feature was developed to help clients experiment with various fonts without needing manual mock-ups. Users can customise their text, download the preview image, and send it to you. The parameters included in the file name then enable you to replicate the design accurately.