TOPページ（フロントページ）に外部の予約ウィジェット（Toreta）を設置したい

Takatoshi 様

トレタ様のサービスについて見識があるわけではないですが、指定箇所にフォームを挿入するにあたってCSSやJS、HTMLを挿入すれば表示可能という認識でよろしいでしょうか。
《ご参考》予約ウィジェット設定 – Shopify Community

その上で答えるのですが、以下のコードでトップページ内に出力するようにしたと思われるJavaScriptコードが上記URL内に見当たらなかったのですが、ご確認いただけますでしょうか。

1. functions.php に以下のコードを追加しました：

php
function toreta_reservation_widget_script() {
if (is_front_page() || is_home()) {
// JavaScript コード
// document.getElementById(‘trt-reservation-widget’) を探して
// 予約フォームのHTMLを動的に生成する処理
}
}
add_action(‘wp_footer’, ‘toreta_reservation_widget_script’, 999);

なので、

【問題】 ブラウザのコンソールを確認すると、以下のメッセージが繰り返し表示されます：

⏳ Widget container not found, retrying…
つまり、JavaScript は実行されているものの、document.getElementById(‘trt-reservation-widget’) が null を返しています。

上記症状と思われる記載も別のJSのものではないでしょうか？

<div id=”trt-reservation-widget”></div>

上記の記述も、ご認識のとおり見当たりません。
ただ、恐れ入りますが、ダブルクオーテーションの記号が誤っており、正しくは以下ではないでしょうか？

<div id="trt-reservation-widget"></div>

なお、以下エラーについて懸念されておりますが、結論から申し上げると、本症状には無関係の可能性が高いです。

Uncaught SecurityError: Failed to read a named property ‘document’ from ‘Window’:
Blocked a frame with origin “https://imagine-test.com” from accessing a cross-origin frame.
このエラーは VK プラグインまたは Lightning テーマ由来のもので、Toreta ウィジェットとは無関係と思われますが、JavaScript 実行に影響している可能性があります。

ページ下の方、Google Map表示の際にiframeを使用しているので、そのために表示されているエラーだと思われます。
《ご参考》ブラウザがjsからiframeのエレメントへのアクセスのブロック現象及び解決方法 | 古松

こちらで回答できることとしては以上となります。
ただ、以下のご質問は、質問内容やご共有いただいている内容を見る限り、Lightningに限らず発生しうる問題と思われます。

Lightning テーマで TOPページにカスタムHTMLブロックを追加した場合、JavaScript から document.getElementById() で要素を取得できない理由はありますか？

Lightning または VK プラグインが DOM の読み込みタイミングに影響を与えている可能性はありますか？

TOPページで外部ウィジェットを正しく動作させるための推奨方法があれば教えてください。

冒頭のShopifyコミュニティでも回答者がおっしゃっているとおり、まずはトレタ様のサポートにお尋ねいただく方が解決が早いかと思います。
（もしくは、wp_footerがWordPress汎用のフック、カスタムHTMLも汎用ブロックであるため、WordPress公式フォーラムでお尋ねいただいても良いかもしれません）