There you will find code example how to build dynamic url to integrate into your php site with necessary params.
Code snippet in admin will contain params for your template (like field, secret key,
tempalte_id, etc. Example will be below:
<pre><code class="language-php">&#x3C;?php
/**
 * Function to create a signed URL for PreviewBuilder API
 *
 * @param string $basePath Base API path
 * @param array $params Parameters for the URL
 * @param string $secretKey Secret key for signature generation
 * @return string Complete URL with signature
 */
function buildRenderUrl($basePath, $params, $secretKey) {
 // Step 1: Use the base path
 $path = $basePath;

 // Steps 2 and 3: Form query parameters
 $queryParts = [];
 foreach ($params as $key => $value) {
 $encodedValue = urlencode($value);
 $queryParts[] = $key . '=' . $encodedValue;
 }
 $query = implode('&#x26;', $queryParts);

 // Step 4: Calculate signature
 $signature = hash_hmac('sha256', $query, $secretKey);

 // Step 5: Build the URL together
 $url = $path . '?' . $query . '&#x26;s=' . $signature;
 return $url;
}

/**
 * Adds meta tags for social networks with dynamic image URL
 *
 * @param string $shardingKey The shard identifier for PreviewBuilder
 * @param string $templateId The template identifier
 * @param string $secretKey Secret key for signature generation
 * @param array $editableFields Fields that can be edited in the template
 */
function addMetaTags($shardingKey, $templateId, $secretKey, $editableFields) {
 // Construct the base path from parameters
 $basePath = "https://{$shardingKey}.previewbuilder.com/api/r/{$templateId}";

 // Get the complete URL
 $renderUrl = buildRenderUrl($basePath, $editableFields, $secretKey);

 // Add meta tags to HTML
 echo "&#x3C;!-- Social media meta tags -->\n";
 echo "&#x3C;meta property=\"og:image\" content=\"{$renderUrl}\" />\n";
 echo "&#x3C;meta property=\"og:image:width\" content=\"1200\" />\n";
 echo "&#x3C;meta property=\"og:image:height\" content=\"628\" />\n";
 echo "&#x3C;meta name=\"twitter:card\" content=\"summary_large_image\" />\n";
 echo "&#x3C;meta name=\"twitter:image\" content=\"{$renderUrl}\" />\n";
}

// Example usage when rendering the page
function renderPage() {
 // Configuration parameters
 $shardingKey = "w0"; // PreviewBuilder shard identifier
 $templateId = "67c045da48d9cc001211ca01"; // Template ID
 $secretKey = "7c9cd65c077e99f840280fb3125dda584ef79e44a349c25cf53e06ecfe52769b"; // Secret key

 $editableFields = [
 'Image1' => 'https://app.previewbuilder.com/forest.jpg',
 'Text3' => 'Good template for media and blog. Just put your title here and use article photo as background.',
 'Text4' => 'MarsTimes.com'
 ];
 ?>
&#x3C;!DOCTYPE html>
&#x3C;html lang="en">
&#x3C;head>
 &#x3C;meta charset="UTF-8">
 &#x3C;meta name="viewport" content="width=device-width, initial-scale=1.0">
 &#x3C;title>Your title&#x3C;/title>
 &#x3C;?php addMetaTags($shardingKey, $templateId, $secretKey, $editableFields); ?>
&#x3C;/head>
&#x3C;body>
 &#x3C;!-- Page content -->
&#x3C;/body>
&#x3C;/html>
 &#x3C;?php
}

// Call the page rendering function
renderPage();
?>
</code></pre>
If you have any questions feel free to contact us via support chat widget. We will be happy to help you to integrate
our service.

How to setup auto generated dynamic opengraph meta og:image tags on php website

Setup dynamic opengraph og:image meta tags with php

There you will find code example how to build dynamic url to integrate into your nodejs site with necessary params.
Code snippet in admin will contain params for your template (like field, secret key, tempalte_id, etc. Example will be below:
<pre><code class="language-javascript">// You need to add those meta tags to your HTML on render time. Will work fine with server side rendering like nextjs/ejs/etc.

&#x3C;meta property="og:image" content="{render_url}" />
&#x3C;meta property="og:image:width" content="1200" />
&#x3C;meta property="og:image:height" content="628" />

// render_url is a dynamic variable! 


import crypto from 'crypto';
const template_id = "67c045da48d9cc001211ca01";
const path = `https://w0.previewbuilder.com/api/r/67c045da48d9cc001211ca01`
const your_secret_key = "b71e7d611639e825a133d654f0f1ba86fe9c48ef01204a237f182a48bfd5b18d"

const Image1 = "https://app.previewbuilder.com/forest.jpg";
const Text3 = "Good template for media and blog. Just put your title here and use article photo as background.";
const Text4 = "MarsTimes.com";

const query = `Image1=${encodeURIComponent(Image1)}&#x26;Text3=${encodeURIComponent(Text3)}&#x26;Text4=${encodeURIComponent(Text4)}`;

const signature = crypto.createHmac('sha256', your_secret_key).update(query).digest('hex');
const render_url = path + '?' + query + '&#x26;s=' + signature;
// insert meta tags with render_url into &#x26;lt;head /&#x26;rt; section.
</code></pre>
If you have any questions feel free to contact us via support chat widget. We will be happy to help you to integrate
our service.

How to setup auto generated dynamic opengraph meta og:image tags on nodejs/nextjs website

Setup dynamic opengraph og:image meta tags with nodejs

To setup rich opengraph image tags just use our application from shopify app store. <a href="https://apps.shopify.com/social-preview-builder">https://apps.shopify.
com/social-preview-builder</a>. App has easy integration
workflow
and everything works automatically.
If you have any questions feel free to contact us via support chat widget. We will be happy to help you to integrate
our service.

How to setup auto generated dynamic opengraph meta og:image tags on shopify store

Setup dynamic opengraph og:image meta tags on shopify store

There will be code snippet which one you should add to your theme. It can be simply done via visual editor embedded
into bigcommerce admin panel.
Code snippet in previewbuilder admin will contain params for your template (like
field, secret key, tempalte_id, etc. Example will be below:
<pre><code class="language-handlebars">{{#each (split head.meta_tags "&#x3C;meta") }}
 {{#if @index '===' 0 }}
 {{{this}}}
 {{else }}
 {{#contains this 'property="og:image"'}}
 {{#unless page_type '==' product}}
 &#x3C;meta {{{this}}}
 {{else}}
 &#x3C;meta property="og:image" content="https://w0.previewbuilder.com/api/r/67c575da19d7c80012a95840?Image1={{getImage @root.product.main_image 'product_size' (cdn theme_settings.default_image_product)}}&#x26;Text3={{getImage @root.product.title}}&#x26;Text4={{encodeURI @root.product.price.with_tax.formatted}}&#x26;Text5=luxury_store.com&#x26;s=f8453cccd56009abc73d1f0653da4ce92896407d0388ef62b31c109d59e70a1c" >
 {{/unless}}
 {{else}}
 &#x3C;meta {{{this}}}
 {{/contains}}
 {{/if}}
{{/each}}
&#x3C;meta property="og:image:width" content="1200">
&#x3C;meta property="og:image:height" content="628">
</code></pre>
<h2>Step by step how to add those snippet into your store theme.</h2>
<h3>1. Open theme page in bigcommerce admin panel</h3>
<img src="/guides/bigc_1.png" alt="">
<h3>2. Make a copy of current active theme</h3>
We recommend you to make TWO copies. Give the first copy name "Backup 01.01.2026" to have a change to revert any
changes automatically and for second copy give name "Activate previewbuilder".
<img src="/guides/bigc_2.png" alt="">
<h3>3. Start editing of theme</h3>
Scroll bottom to the list of saved theme and start edit "Activate previewbuilder" theme.
<img src="/guides/bigc_3.png" alt="">
<h3>4. Add the snippet</h3>
In the left panel open file templates/layout/base.html and replace {{{head.meta_tags}}} line with the code snippet from admin panel.
<img src="/guides/bigc_4.png" alt="">
You should REPLACE {{{head.meta_tags}}} with the snippet. After the change:
<img src="/guides/bigc_5.png" alt="">
<h3>5. Activate new theme</h3>
On the themes list click "Activate" on our theme after saving. You can revert changes any time by activating backup.
<img src="/guides/bigc_6.png" alt="">
That's all. Now your products links have rich dynamic preview.
If you have any questions feel free to contact us via support chat widget. We will be happy to help you to integrate
our service.

How to setup auto generated dynamic opengraph meta og:image tags with bigcommerce store

PreviewBuilder integration guides

How to set up automatic generation of eye-catching OpenGraph images for different languages and website engines.

Setup dynamic opengraph og:image meta tags with php

Read

Setup dynamic opengraph og:image meta tags with nodejs

Read

Setup dynamic opengraph og:image meta tags on shopify store

Read

Setup dynamic opengraph og:image meta tags with bigcommerce store

Read

PreviewBuilder integration guides

How to set up automatic generation of eye-catching OpenGraph images for different languages and website engines.

Setup dynamic opengraph og:image meta tags with phpRead

Setup dynamic opengraph og:image meta tags with nodejsRead

Setup dynamic opengraph og:image meta tags on shopify storeRead

Setup dynamic opengraph og:image meta tags with bigcommerce storeRead

Setup dynamic opengraph og:image meta tags with php

Read

Setup dynamic opengraph og:image meta tags with nodejs

Read

Setup dynamic opengraph og:image meta tags on shopify store

Read

Setup dynamic opengraph og:image meta tags with bigcommerce store

Read