Embedding code onto an image

Hi there, I'm trying to add a widget onto an image and am wondering if this is possible via code.  I am also not currently even able to embed the widget...

which is the following from a reservations company:

                    <link rel="stylesheet" type="text/css" href="https://onsass.designmynight.com/?background-color=%23fffccb&primary-color=%23fffccb&body-text-color=%23f8cbe4&outer-border-color=gray"><script src="//widgets.designmynight.com/bookings-partner.min.js" dmn-booking-form="true" venue="66b37bdce26b763527072e0a" hide-offers="true" hide-powered-by="false" search-venues="false" monday-first="true" locale="undefined"></script>
               

thanks very much

I think you can add a Code Block under Image Block > paste your code > then share page url, we can try some code to move Code Block into Image

Hi Tuan, Thank you so much - apologies for delay. I've embedded the code but still can't work out how I would hover it as the way I'm currently embedding the widget is through code on the page as I don't want it on every page so it's not in an image as it were but it's own block. Thanks

On 8/30/2024 at 4:38 PM, tuanphan said:

I think you can add a Code Block under Image Block > paste your code > then share page url, we can try some code to move Code Block into Image

You can try this then share url, we can check easier

Of course - the url is: https://www.diddys.co.uk/booking-page

and I was hoping to have a shape similar to the left behind the booking widget.

Thank you

You can use this code to Website Tools > Code Injection > Footer.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('#block-yui_3_17_2_1_1727202079275_3745').appendTo('#block-yui_3_17_2_1_1727210333921_2493 figcaption');
});
</script>
<style>
  #block-yui_3_17_2_1_1727210333921_2493 figcaption {
    display: flex;
    flex-direction: column;
}

div#dmn-partner-widget {
    max-width: 100% !important;
    width: 350px !important;
}
</style>

Do you have a large image version?