{"id":2589,"date":"2026-05-06T10:35:34","date_gmt":"2026-05-06T08:35:34","guid":{"rendered":"https:\/\/ahassan.inscastellbisbal.net\/?page_id=2589"},"modified":"2026-05-06T11:10:16","modified_gmt":"2026-05-06T09:10:16","slug":"comunicacio-frontend-i-backend-i-integracio-del-widget-a-la-pagina-web","status":"publish","type":"page","link":"https:\/\/ahassan.inscastellbisbal.net\/?page_id=2589","title":{"rendered":"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Backend:<\/strong><\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Primer de tot <strong>executem<\/strong> el codi <strong>perqu\u00e8<\/strong> es <strong>llegeixi<\/strong> p\u00e0gines del meu <strong>web<\/strong>, i ens va donar un <strong>enlla\u00e7<\/strong> de <strong>ngrok<\/strong> que <strong>posem<\/strong> en el <strong>frontend<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"442\" src=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-05-XatBot2026.ipynb-Colab-1-1024x442.png\" alt=\"\" class=\"wp-image-2853\" style=\"aspect-ratio:2.3167711325672413;width:585px;height:auto\" srcset=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-05-XatBot2026.ipynb-Colab-1-1024x442.png 1024w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-05-XatBot2026.ipynb-Colab-1-300x130.png 300w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-05-XatBot2026.ipynb-Colab-1-768x332.png 768w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-05-XatBot2026.ipynb-Colab-1-1536x663.png 1536w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-05-XatBot2026.ipynb-Colab-1.png 1758w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Aqu\u00ed<\/strong> tenim l&#8217;<strong>enlla\u00e7<\/strong> que <strong>posem<\/strong> en el <strong>frontend<\/strong>. Que ja <strong>tenim<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Frontend:<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>L&#8217;<strong>enlla\u00e7<\/strong> que em va donar el <strong>backend<\/strong> el posem <strong>aqu\u00ed<\/strong> en el <strong>frontend<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"183\" src=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-30-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-1024x183.png\" alt=\"\" class=\"wp-image-2854\" srcset=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-30-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-1024x183.png 1024w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-30-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-300x54.png 300w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-30-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-768x137.png 768w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-30-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-1536x275.png 1536w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-16-30-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress.png 1676w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Integraci\u00f3 del Widget:<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Per posar <strong>widget<\/strong> en la <strong>nostra<\/strong> web pel <strong>xatbot<\/strong> hem d&#8217;<strong>entrar<\/strong> en el <strong>nostre<\/strong> <strong>WordPress<\/strong> i <strong>entrem<\/strong> en <strong>Extensions<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"160\" height=\"389\" src=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-34-05-Tauler-\u2039-Ali-Hassan-smx-\u2014-WordPress.png\" alt=\"\" class=\"wp-image-2855\" style=\"width:147px;height:auto\" srcset=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-34-05-Tauler-\u2039-Ali-Hassan-smx-\u2014-WordPress.png 160w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-34-05-Tauler-\u2039-Ali-Hassan-smx-\u2014-WordPress-123x300.png 123w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/figure>\n\n\n\n<p>despr\u00e9s d&#8217;<strong>entrar<\/strong> en <strong>Extensions<\/strong> Donem a<strong> Afageix una extensio:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"318\" height=\"88\" src=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-34-42-Extensions-\u2039-Ali-Hassan-smx-\u2014-WordPress.png\" alt=\"\" class=\"wp-image-2856\" srcset=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-34-42-Extensions-\u2039-Ali-Hassan-smx-\u2014-WordPress.png 318w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-34-42-Extensions-\u2039-Ali-Hassan-smx-\u2014-WordPress-300x83.png 300w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/figure>\n\n\n\n<p>Despr\u00e9s a la <strong>barra<\/strong> de <strong>buscar<\/strong>: <strong>Busquem<\/strong> <strong>WP code<\/strong>, i <strong>instal\u00b7lem<\/strong> la que est\u00e0 <strong>marcat<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"531\" src=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-36-33-Afegeix-extensions-\u2039-Ali-Hassan-smx-\u2014-WordPress-1024x531.png\" alt=\"\" class=\"wp-image-2857\" style=\"aspect-ratio:1.9284414796846574;width:721px;height:auto\" srcset=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-36-33-Afegeix-extensions-\u2039-Ali-Hassan-smx-\u2014-WordPress-1024x531.png 1024w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-36-33-Afegeix-extensions-\u2039-Ali-Hassan-smx-\u2014-WordPress-300x156.png 300w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-36-33-Afegeix-extensions-\u2039-Ali-Hassan-smx-\u2014-WordPress-768x398.png 768w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-36-33-Afegeix-extensions-\u2039-Ali-Hassan-smx-\u2014-WordPress-1536x797.png 1536w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-36-33-Afegeix-extensions-\u2039-Ali-Hassan-smx-\u2014-WordPress.png 1747w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>L&#8217;instal\u00b7lem<\/strong> i entrem en el punt <strong>Cap\u00e7alera<\/strong> i peu de <strong>p\u00e0gina<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"160\" height=\"369\" src=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-36-56-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress.png\" alt=\"\" class=\"wp-image-2858\" srcset=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-36-56-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress.png 160w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-36-56-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-130x300.png 130w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/figure>\n\n\n\n<p>Despr\u00e9s posem el <strong>codi<\/strong> de <strong>Frontend<\/strong> a on posa <strong>Peu<\/strong> de <strong>p\u00e0gina<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"212\" src=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-37-19-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-1024x212.png\" alt=\"\" class=\"wp-image-2859\" srcset=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-37-19-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-1024x212.png 1024w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-37-19-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-300x62.png 300w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-37-19-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-768x159.png 768w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-37-19-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress-1536x318.png 1536w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-06-at-09-37-19-Capcalera-i-peu-de-pagina-\u2039-Ali-Hassan-smx-\u2014-WordPress.png 1695w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/blockquote>\n\n\n\n<p>Ja tenim posat el <strong>xatbot<\/strong> que hem <strong>fet<\/strong>, aqu\u00ed podeu <strong>veure<\/strong> el meu <strong>xatbot<\/strong> comunicant:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"572\" src=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-12.png\" alt=\"\" class=\"wp-image-2866\" style=\"width:239px;height:auto\" srcset=\"https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-12.png 350w, https:\/\/ahassan.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-12-184x300.png 184w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n<div class=\"wpforms-container wpforms-container-full wpforms-block wpforms-block-83e6c6d7-e7b9-4f09-89aa-00d2fcbf18d9\" id=\"wpforms-764\"><form id=\"wpforms-form-764\" class=\"wpforms-validate wpforms-form\" data-formid=\"764\" method=\"post\" enctype=\"multipart\/form-data\" action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F2589\" data-token=\"0bed34a744a676e1df5823f5038439b0\" data-token-time=\"1778165016\"><noscript class=\"wpforms-error-noscript\">Activeu el JavaScript al navegador per a poder completar el formulari.<\/noscript><div class=\"wpforms-field-container\"><div id=\"wpforms-764-field_0-container\" class=\"wpforms-field wpforms-field-name wpforms-one-half wpforms-first\" data-field-id=\"0\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-764-field_0\">Name <span class=\"wpforms-required-label\">*<\/span><\/label><input type=\"text\" id=\"wpforms-764-field_0\" class=\"wpforms-field-large wpforms-field-required\" name=\"wpforms[fields][0]\" placeholder=\"Your Name\" required><\/div><div id=\"wpforms-764-field_3-container\" class=\"wpforms-field wpforms-field-email wpforms-one-half\" data-field-id=\"3\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-764-field_3\">Email <span class=\"wpforms-required-label\">*<\/span><\/label><input type=\"email\" id=\"wpforms-764-field_3\" class=\"wpforms-field-large wpforms-field-required\" name=\"wpforms[fields][3]\" placeholder=\"Your Email\" spellcheck=\"false\" required><\/div><div id=\"wpforms-764-field_4-container\" class=\"wpforms-field wpforms-field-text\" data-field-id=\"4\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-764-field_4\">Subject<\/label><input type=\"text\" id=\"wpforms-764-field_4\" class=\"wpforms-field-large\" name=\"wpforms[fields][4]\" placeholder=\"Subject\" ><\/div><div id=\"wpforms-764-field_2-container\" class=\"wpforms-field wpforms-field-textarea\" data-field-id=\"2\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-764-field_2\">Message <span class=\"wpforms-required-label\">*<\/span><\/label><textarea id=\"wpforms-764-field_2\" class=\"wpforms-field-medium wpforms-field-required\" name=\"wpforms[fields][2]\" placeholder=\"Your Message\" required><\/textarea><\/div><\/div><!-- .wpforms-field-container --><div class=\"wpforms-submit-container\" ><input type=\"hidden\" name=\"wpforms[id]\" value=\"764\"><input type=\"hidden\" name=\"page_title\" value=\"\"><input type=\"hidden\" name=\"page_url\" value=\"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/2589\"><input type=\"hidden\" name=\"url_referer\" value=\"\"><button type=\"submit\" name=\"wpforms[submit]\" id=\"wpforms-submit-764\" class=\"wpforms-submit\" data-alt-text=\"Sending...\" data-submit-text=\"Send message\" aria-live=\"assertive\" value=\"wpforms-submit\">Send message<\/button><\/div><\/form><\/div>  <!-- .wpforms-container -->","protected":false},"excerpt":{"rendered":"<p>Backend: Frontend: Integraci\u00f3 del Widget: Ja tenim posat el xatbot que hem fet, aqu\u00ed podeu veure el meu xatbot comunicant:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1860,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2589","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/2589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2589"}],"version-history":[{"count":2,"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/2589\/revisions"}],"predecessor-version":[{"id":2867,"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/2589\/revisions\/2867"}],"up":[{"embeddable":true,"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1860"}],"wp:attachment":[{"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}