How to execute javascript in specific moment inside conversation?

[NowakAdmin]

Hello everyone, I'm trying to achieve that my div with file uploading form in botman will be visible only in this specific moment in conversation.

my question in conversation:

public function askPhoto()
{

// here i want to form to go visible:
    echo'<script>
    var userText2 =  document.getElementById("userText");
    var fileUploadPanel2 =  document.getElementById("div-attachments-container-hider");

    fileUploadPanel2.style.display = "inline-block";
    userText2.style.bottom = "45px";

    </script>';
// end go visible section

    $this->bot->typesAndWaits(2);
    $this->askForImages(
        'Please upload photo.',

        function ($images) {

            foreach ($images as $image) {
                $imageFilename = time() . '.jpg';
                Storage::disk('chatimages')->put($imageFilename, file_get_contents($image->getUrl()));
            }
// here i want to form to go back to invisible:
            echo'<script>
            var userText2 =  document.getElementById("userText");
            var fileUploadPanel2 =  document.getElementById("div-attachments-container-hider");

                fileUploadPanel2.style.display = "none";
                userText2.style.bottom = "5px";

            </script>';
// end go back to invisible section

            $this->bot->typesAndWaits(3);
            $this->say("Dziękujemy za przesłanie zdjęcia, poddamy je analizie przez naszą sztuczną inteligencje i prześlemy Ci wyniki na maila.");
            $this->bot->typesAndWaits(2);
            $this->askAge();

        },
        function (Answer $answer) {
            $question = Question::create("Wygląda na to że nie przesłano poprawnego zdjęcia. Czy chcesz je przesłać ponownie czy pominąć ten krok?")
                ->addButtons([
                    Button::create('Wyślę zdjęcie jeszcze raz')->value('photo'),
                    Button::create('Przejdę do dalszej części ankiety')->value('skip'),
                ]);
            $this->bot->typesAndWaits(2);
            return $this->ask($question, function (Answer $answer) {
                if ($answer->isInteractiveMessageReply()) {
                    if ($answer->getValue() === 'photo') {
                        $this->askPhoto();
                    } elseif ($answer->getValue() === 'skip') {
                        $this->askAge();
                    }
                }
            });
        }
    );
}

all i get is that my echo'<script>...' goes in botman response and not execute so I think that I should do it other way. In my concept easiest way was to change css display. How i should make code to achieve it? Please help newbie in this case.

[filippotoso]

I'm trying to achieve that my div with file uploading form in botman will be visible only in this specific moment in conversation.

You can do it:

• passing an additional parameter to the askForImages() method (ie. ['show_upload' => true] in $additionalParameters)
• customizing the web widget to read such parameter and display the upload form only if the value is the correct one

Echoing HTML/JS from a conversation method just breaks the communication protocol between the web driver and the web widget.

[NowakAdmin]

Thank You for reply.

I added to my function ['show_upload' => true] like that:

public function askPhoto()
{
    $this->bot->typesAndWaits(2);
    $this->askForImages(
        'Please upload photo.',

        function ($images) {

            foreach ($images as $image) {
                $imageFilename = time() . '.jpg';
                Storage::disk('chatimages')->put($imageFilename, file_get_contents($image->getUrl()));
            }

            $this->bot->typesAndWaits(3);
            $this->say("Dziękujemy za przesłanie zdjęcia, poddamy je analizie przez naszą sztuczną inteligencje i prześlemy Ci wyniki na maila.");
            $this->bot->typesAndWaits(2);
            $this->askAge();

        },
        function (Answer $answer) {
            $question = Question::create("Wygląda na to że nie przesłano poprawnego zdjęcia. Czy chcesz je przesłać ponownie czy pominąć ten krok?")
                ->addButtons([
                    Button::create('Wyślę zdjęcie jeszcze raz')->value('photo'),
                    Button::create('Przejdę do dalszej części ankiety')->value('skip'),
                ]);
            $this->bot->typesAndWaits(2);
            return $this->ask($question, function (Answer $answer) {
                if ($answer->isInteractiveMessageReply()) {
                    if ($answer->getValue() === 'photo') {
                        $this->askPhoto();
                    } elseif ($answer->getValue() === 'skip') {
                        $this->askAge();
                    }
                }
            });
        }, ['show_upload' => true]
    );
}

Then i tought the best way to handle it will be in my botman blade:

 @if ($show_upload ?? false) === true)
<div id="div-attachments-container-hider" class="div-attachments-container" >
	<div class="div-attachments">
        <span id="view-image" class="view-attachment-left fa fa-file-image-o"></span>
		<span id="view-file-name" class="view-attachment-left"></span>
		<span id="send" class="view-attachment-right fa fa-paper-plane" en="true"></span>
	</div>
</div>
@endif

but it seems that this value not exist here and form is not showing up, $show_upload not exist. How to handle that ?

[filippotoso]

This is the web widget you have to customize:

https://botman.io/2.0/web-widget
https://github.com/botman/web-widget

As far as I can understand, it doesn't seem you have the technological capabilities to do it.

[NowakAdmin]

I use widget i successfully implemnted it, also i successfully added uploading images to it using methods from botman/web-widget#23

All works well, now i want to expand this project with hiding upload form when its not needed (most of time in my project)

I'm not too well in JS, jquery, TypeScript etc. so You'r quite right. Thats why i tried with css at first. I searched in botman documentation about "Additional parameters" and I can't find how widget handle it