   <div class="info-with-img">
    <h2>
        Embed Simplex Booking Engine on wesite
    </h2>


    <ol>
        <li>
            Enter  <strong>Chain ID</strong> in general settings, an engine preview should appear.<br />
            click &quot;save settings&quot; to save chain id.<br /><br />

        </li>
        <li>
            Embedding options:
            <ol>
                <li>
                    <strong>Using code </strong><br />
                    add div &lt;div id=&quot;simplex-be&quot;&gt;&lt;/div&gt;<br />
                    where engine should apprear<br /><br />

                </li>
                <li>
                    <strong>Using Elementor Editor</strong><br />
                    use widget &quot;Simplex Booking Engine&quot;<br />
                    <img alt="" src="" data-src="assets/shared/images/widget-engine.jpg" /><br />
                    * if widget was added twice to page, will only show once, other appearances will be empty<br /><br />

                </li>
                <li>
                    <strong>Using Gutenberg Editor</strong><br />
                    use block&quot;Simplex Booking Engine&quot;<br />
                    <img alt="" src="" data-src="assets/shared/images/block-engine.jpg" />
                    <br /><br />
                </li>
            </ol>
        </li>
    </ol>


    <h2>Mobile Engine</h2>

    On mobile, the engine will be open after clickling the &quot;book now&quot; button:<br />
    <img alt="" src="" data-src="assets/shared/images/book-now-button.jpg" style="margin-top: 20px;"/>
    <br />
    <br />
    <ul>
    <li style="margin-left: 3px;">
        To set a button as &quot;book now&quot; for the engine, add the following class to the button element:
            <strong>
                &quot;simplex-booking-engine-btn&quot;.
            </strong>
            <br />
        </li>
        <li>
        If the button doesn't exist &quot;book now&quot; button is added automatically.<br />
    </li>
    </ul>

</div>